From 439932c168dbe85f0e2e77e778d7f1fff732abbe Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Thu, 10 Sep 2026 23:34:42 +0200
Subject: [PATCH] Fix admin panel mobile layout and inconsistent page padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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     | 13 +++++++++++++
 src/components/orders/AdminOrdersView.module.scss |  6 ------
 src/components/orders/AdminOrdersView.tsx         |  2 +-
 src/routes/admin.module.scss                      | 11 +++++++++++
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/admin/MenuItemForm.module.scss b/src/components/admin/MenuItemForm.module.scss
index 6183be6..a4ddbcc 100644
--- a/src/components/admin/MenuItemForm.module.scss
+++ b/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 {
diff --git a/src/components/orders/AdminOrdersView.module.scss b/src/components/orders/AdminOrdersView.module.scss
index 9ccd8cf..4cc33c8 100644
--- a/src/components/orders/AdminOrdersView.module.scss
+++ b/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;
 }
diff --git a/src/components/orders/AdminOrdersView.tsx b/src/components/orders/AdminOrdersView.tsx
index 9ff7c61..6ed3260 100644
--- a/src/components/orders/AdminOrdersView.tsx
+++ b/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>
diff --git a/src/routes/admin.module.scss b/src/routes/admin.module.scss
index ccec52f..9c7d139 100644
--- a/src/routes/admin.module.scss
+++ b/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%;