v1.4 - Login fixes, etc

frontend/src/lib/components/MixWorkspace.svelte

@@ -415,7 +415,7 @@
           <tbody>
             {#each draftRows as row, index}
               <tr>
-                <td>
+                <td data-label="Raw Material">
                   <select
                     value={row.raw_material_id ?? ''}
                     onchange={(event) =>
@@ -431,10 +431,10 @@
                     {/each}
                   </select>
                 </td>
-                <td>{currency(row.marketValue)}</td>
-                <td>{row.wastePercentage !== null ? `${(row.wastePercentage * 100).toFixed(1)}%` : 'N/A'}</td>
-                <td>{currency(row.costPerKg, 4)}</td>
-                <td>
+                <td data-label="Market Value">{currency(row.marketValue)}</td>
+                <td data-label="Waste %">{row.wastePercentage !== null ? `${(row.wastePercentage * 100).toFixed(1)}%` : 'N/A'}</td>
+                <td data-label="Cost / Kg">{currency(row.costPerKg, 4)}</td>
+                <td data-label="Qty Kg">
                   <input
                     type="number"
                     min="0"
@@ -445,8 +445,8 @@
                     }
                   />
                 </td>
-                <td>{currency(row.lineCost)}</td>
-                <td>
+                <td data-label="Line Cost">{currency(row.lineCost)}</td>
+                <td data-label="Notes">
                   <input
                     type="text"
                     value={row.notes}
@@ -454,7 +454,7 @@
                     placeholder="Optional row note"
                   />
                 </td>
-                <td>
+                <td data-label="Row Action">
                   <button class="icon-delete" type="button" onclick={() => removeIngredientRow(index)}>Remove</button>
                 </td>
               </tr>
@@ -756,6 +756,7 @@
 
   .sheet-table {
     width: 100%;
+    min-width: 58rem;
     border-collapse: separate;
     border-spacing: 0 0.54rem;
   }
@@ -860,12 +861,24 @@
     background: var(--panel-soft);
   }
 
-  @media (max-width: 1180px) {
-    .editor-grid,
-    .metric-row,
-    .meta-grid {
+  @media (max-width: 1240px) {
+    .editor-grid {
       grid-template-columns: 1fr;
     }
+
+    .sidebar-stack {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 1180px) {
+    .metric-row {
+      grid-template-columns: 1fr;
+    }
+
+    .meta-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
   }
 
   @media (max-width: 760px) {
@@ -877,8 +890,88 @@
       align-items: flex-start;
     }
 
+    .intro-actions,
+    .editor-actions,
+    .primary-button,
+    .secondary-button {
+      width: 100%;
+    }
+
     .summary-grid {
       grid-template-columns: 1fr;
     }
+
+    .meta-grid,
+    .sidebar-stack {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 880px) {
+    .sheet-table,
+    .sheet-table thead,
+    .sheet-table tbody,
+    .sheet-table tr,
+    .sheet-table td {
+      display: block;
+      width: 100%;
+    }
+
+    .sheet-table {
+      min-width: 0;
+      border-spacing: 0;
+    }
+
+    .sheet-table thead {
+      display: none;
+    }
+
+    .sheet-table tbody {
+      display: grid;
+      gap: 0.9rem;
+    }
+
+    .sheet-table tbody tr {
+      padding: 0.35rem;
+      border: 1px solid var(--line);
+      border-radius: 1rem;
+      background: var(--panel-soft);
+    }
+
+    .sheet-table tbody td {
+      padding: 0.78rem 0.8rem;
+      white-space: normal;
+      border: none;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .sheet-table tbody td:first-child,
+    .sheet-table tbody td:last-child {
+      border: none;
+      border-radius: 0;
+    }
+
+    .sheet-table tbody td + td {
+      border-top: 1px solid var(--line);
+    }
+
+    .sheet-table tbody td::before {
+      content: attr(data-label);
+      display: block;
+      margin-bottom: 0.35rem;
+      color: var(--muted);
+      font-size: 0.72rem;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .sheet-table input,
+    .sheet-table select,
+    .icon-delete {
+      width: 100%;
+      min-width: 0;
+    }
   }
 </style>