Login mobile/PWA conformance (v0.1.0:96)
The v95 mobile-first redesign covered the 4 core surfaces but skipped the login/first-admin screen, which still used desktop-only `height: 100vh` and a fixed centered card with no screen gutters or safe-area handling. On an installed iOS PWA (viewport-fit=cover, fixed black status bar) the centered card could tuck under the status bar, and on small phones the panel ran edge-to-edge. CSS-only fix, scoped to the login surface (no markup/JS/schema change; desktop login untouched): - `.login-container`: 100vh -> min-height 100dvh (+ vh fallback) so the dynamic viewport and standalone PWA chrome are respected. - New <768px media query: 16px screen gutters + env(safe-area-inset) top/bottom clearance, full-bleed card, and touch-sized fields (inputs 46px/15px, button 46px). - `.login-card`: add the §4 card depth shadow to match `.section`. Closes the login-surface half of the known PWA status-bar collision risk.
This commit is contained in:
+24
-1
@@ -1853,7 +1853,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
min-height: 100vh; /* fallback for browsers without dvh */
|
||||
min-height: 100dvh; /* dynamic viewport: iOS address-bar collapse + standalone PWA */
|
||||
background-color: var(--bg-base);
|
||||
}
|
||||
|
||||
@@ -1864,6 +1865,7 @@
|
||||
padding: 32px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 14px 26px rgba(2, 12, 24, 0.28), inset 0 1px 0 #ffffff07; /* match .section card depth (§4) */
|
||||
}
|
||||
|
||||
.login-title {
|
||||
@@ -1920,6 +1922,27 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* Login predates the mobile-first redesign; bring it to §8:
|
||||
16px gutters, safe-area clearance (standalone PWA + viewport-fit=cover),
|
||||
and touch-sized fields. */
|
||||
.login-container {
|
||||
padding: max(env(safe-area-inset-top), 16px) 16px max(env(safe-area-inset-bottom), 16px);
|
||||
}
|
||||
.login-card {
|
||||
max-width: 100%;
|
||||
}
|
||||
.login-form .text-input {
|
||||
font-size: 15px; /* mobile.font-size.body */
|
||||
min-height: 46px; /* mobile.size.input */
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.login-button {
|
||||
min-height: 46px; /* touch-target floor (44) + input parity */
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.pipeline-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
|
||||
Reference in New Issue
Block a user