Wrap slot in a div for improved layout structure and adjust CSS for better responsiveness, including font size and app shell constraints for small screens.

src/routes/+layout.svelte

@@ -2,4 +2,6 @@
   import "./layout.css";
 </script>
 
-<slot />
+<div class="app-shell">
+  <slot />
+</div>

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;
   }
 }