Refactor layout.css and ItemsCrud.svelte for improved responsiveness and readability. Adjust font sizes for mobile and desktop views, and enhance layout constraints for better scaling on larger screens.

src/routes/items/ItemsCrud.svelte

@@ -114,14 +114,14 @@
   <title>Items – Stackq</title>
 </svelte:head>
 
-<main class="container mx-auto flex flex-col gap-4 px-4 py-6 sm:gap-6 sm:px-6 sm:py-8">
+<main class="container mx-auto flex flex-col gap-4 px-4 py-6 sm:gap-6 sm:px-6 sm:py-8 md:max-w-full">
   <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
     <div class="flex items-center gap-2 min-w-0">
       <a href="/" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to main">Back</a>
       <h1 class="text-xl font-semibold truncate sm:text-2xl">Stackq Items</h1>
     </div>
     <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-2">
-      <div class="w-full sm:w-64 sm:min-w-0">
+      <div class="w-full sm:w-64 md:w-80 sm:min-w-0">
         <Input
           type="search"
           placeholder="Search items, SKU…"
@@ -157,7 +157,7 @@
     <div class="flex flex-col gap-2">
       {#each filteredItems as item (item.id)}
         <Card class="overflow-hidden">
-          <CardContent class="flex flex-row items-center gap-3 p-3">
+          <CardContent class="flex flex-row items-center gap-3 p-3 md:gap-4 md:px-4 md:py-3">
             <div class="size-12 shrink-0 overflow-hidden rounded border">
               {#if imageUrl(item)}
                 <a

src/routes/layout.css

@@ -106,7 +106,7 @@
     /* Match device text scaling (prevent iOS from inflating text) */
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
-    /* Small font, tuned for ~iPhone 16 Pro (402px viewport) */
+    /* Small font on mobile; readable on desktop */
     font-size: 12px;
     width: 100%;
     height: 100%;
@@ -114,6 +114,11 @@
     padding: 0;
     overflow: hidden;
   }
+  @media (min-width: 768px) {
+    html {
+      font-size: 14px;
+    }
+  }
   body {
     @apply bg-background text-foreground;
     box-sizing: border-box;
@@ -132,7 +137,7 @@
     flex-direction: column;
     align-items: center;
   }
-  /* Constrain width to iPhone 16 Pro viewport (402px); fill height without causing scroll */
+  /* Narrow on mobile (iPhone 16 Pro); wider on desktop for better scaling */
   .app-shell {
     width: 100%;
     max-width: 402px;
@@ -143,6 +148,11 @@
     flex-direction: column;
     overflow: hidden;
   }
+  @media (min-width: 768px) {
+    .app-shell {
+      max-width: 56rem; /* 896px – comfortable items list on desktop */
+    }
+  }
   /* Page content area fills shell and avoids outer scroll when possible */
   .app-shell .page-view {
     flex: 1 1 0;