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