diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index f4c1b927..dbcae44e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,4 +2,6 @@ import "./layout.css"; - +
+ +
diff --git a/src/routes/layout.css b/src/routes/layout.css index 20dbda30..e5a83780 100644 --- a/src/routes/layout.css +++ b/src/routes/layout.css @@ -106,8 +106,8 @@ /* Match device text scaling (prevent iOS from inflating text) */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; - /* Slightly smaller base so layout scales better on small screens */ - font-size: clamp(14px, 2.5vw + 12px, 16px); + /* Small font, tuned for ~iPhone 16 Pro (402px viewport) */ + font-size: 12px; } body { @apply bg-background text-foreground; @@ -116,10 +116,18 @@ padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); } - /* Larger tap targets on touch devices (buttons only; links use .touch-target where needed) */ + /* Constrain width to iPhone 16 Pro viewport (402px) so layout matches on all devices */ + .app-shell { + width: 100%; + max-width: 402px; + min-height: 100dvh; + margin-left: auto; + margin-right: auto; + } + /* Compact tap targets so UI is denser */ @media (pointer: coarse) { button:not([class*="size-"]) { - min-height: 44px; + min-height: 36px; } } } @@ -134,7 +142,7 @@ padding: 0.5rem; } -/* Prevent iOS zoom on input focus (requires font-size >= 16px) */ +/* Slightly larger inputs on small screens for readability (still small) */ @media (max-width: 640px) { input[type="text"], input[type="search"], @@ -143,6 +151,6 @@ input[type="password"], select, textarea { - font-size: 16px; + font-size: 14px; } }