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:
@@ -0,0 +1,19 @@
|
||||
import { VersionInfo } from '@start9labs/start-sdk'
|
||||
|
||||
// Login page mobile/PWA conformance — the one surface the v95 mobile redesign skipped.
|
||||
// CSS-only: .login-container 100vh → 100dvh (dynamic viewport; the centered card no longer
|
||||
// tucks under the iOS standalone status bar), plus a <768px media query adding 16px screen
|
||||
// gutters + env(safe-area-inset) top/bottom clearance + touch-sized fields (inputs 46px/15px,
|
||||
// button 46px) and a full-bleed card on small phones; the login card also gains the §4 card
|
||||
// depth shadow to match .section. No markup/JS/schema change; desktop login unchanged.
|
||||
export const v_0_1_0_96 = VersionInfo.of({
|
||||
version: '0.1.0:96',
|
||||
releaseNotes: {
|
||||
en_US: [
|
||||
'Mobile polish: the login screen is now touch-native and PWA-safe — proper screen',
|
||||
'gutters, safe-area clearance so the card never hides under the iPhone status bar,',
|
||||
'and larger tap targets. Desktop login is unchanged.',
|
||||
].join(' '),
|
||||
},
|
||||
migrations: { up: async () => {}, down: async () => {} },
|
||||
})
|
||||
Reference in New Issue
Block a user