Fix admin panel mobile layout and inconsistent page padding

The admin layout's .layout used align-items: flex-start, correct for
the desktop row (sidebar + content) but wrong once it stacks to a
column at mobile width — align-items controls the cross axis, which
flips from height to width, so children were shrinking to fit their
own content instead of stretching to the viewport. This is what caused
the sidebar's nav links to render squashed/tall and the menu list to
overflow horizontally. Same root cause on .sidebar's own flex-basis,
which fixed its height instead of width once stacked.

Also stacks the menu item form's option/step rows to a column below
the tablet breakpoint (they didn't fit and forced horizontal scroll),
and removes AdminOrdersView's leftover standalone-page padding/max-width
— it was still wrapping its content in the styling meant for a
top-level page, giving "All orders" visibly more padding than Menu/
Kitchen, which just use the admin layout's own padding.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/admin/MenuItemForm.module.scss

@@ -62,6 +62,14 @@
   .field {
     flex: 1;
   }
+
+  @media (max-width: $breakpoint-tablet) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $space-1;
+    padding-bottom: $space-2;
+    border-bottom: 1px solid $color-border;
+  }
 }
 
 .stepName {
@@ -86,6 +94,11 @@
   &:hover {
     border-color: $color-danger;
   }
+
+  @media (max-width: $breakpoint-tablet) {
+    margin-top: 0;
+    align-self: flex-end;
+  }
 }
 
 .addButton {

src/components/orders/AdminOrdersView.module.scss

@@ -1,11 +1,5 @@
 @use '../../styles/variables' as *;
 
-.page {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: $space-5 $space-3;
-}
-
 .heading {
   margin: 0 0 $space-4;
 }

src/components/orders/AdminOrdersView.tsx

@@ -22,7 +22,7 @@ const formatCustomer = (customer: AdminOrderSummary['customer']) =>
     : `${customer.name} (guest) · ${customer.contact}`
 
 export const AdminOrdersView = ({ orders }: AdminOrdersViewProps) => (
-  <section className={styles.page}>
+  <section>
     <h1 className={styles.heading}>All orders</h1>
     {orders.length === 0 ? (
       <p className={styles.empty}>No orders have been placed yet.</p>

src/routes/admin.module.scss

@@ -9,7 +9,13 @@
   padding: $space-4 $space-3;
 
   @media (max-width: $breakpoint-tablet) {
+    // align-items controls the cross axis, which flips from height to
+    // width once this switches to a column — flex-start (correct for
+    // desktop, so the sidebar and content don't stretch to match heights)
+    // would otherwise shrink-to-fit each child's own content width instead
+    // of stretching it to the viewport, letting long content overflow.
     flex-direction: column;
+    align-items: stretch;
   }
 }
 
@@ -22,6 +28,11 @@
   top: $space-4;
 
   @media (max-width: $breakpoint-tablet) {
+    // `.layout` stacks to a column below, so this flex-basis would
+    // otherwise fix the sidebar's *height* at 200px instead of its width
+    // — reset it and stop the row of links from stretching to fill that.
+    flex: 0 0 auto;
+    align-items: center;
     position: static;
     flex-direction: row;
     width: 100%;