diff --git a/apps/web/src/layouts/AppLayout.scss b/apps/web/src/layouts/AppLayout.scss
index 3615e4f..e8d5365 100644
--- a/apps/web/src/layouts/AppLayout.scss
+++ b/apps/web/src/layouts/AppLayout.scss
@@ -264,58 +264,70 @@
   // A single class toggle on the root element — every nested rule below
   // just hides labels/chevrons and re-centers icons via CSS, no child
   // component needs to know the sidebar is collapsed.
-  &.collapsed {
-    width: 4.25rem;
-    padding-left: var(--space-sm);
-    padding-right: var(--space-sm);
+  //
+  // Scoped to `min-width: 641px` (the exact complement of the mobile
+  // `@media (max-width: 640px)` block below): `isCollapsed` persists in
+  // `localStorage` (`batchcooking:sidebarCollapsed`) independently of
+  // viewport width, so a user who collapsed the desktop rail and then
+  // shrinks the window (or opens the same session on a phone) still carries
+  // that flag. Without this guard, `.app-sidebar.collapsed`'s `width:
+  // 4.25rem`/`flex-direction: column` (specificity 0,2,0) beat the mobile
+  // block's `.app-sidebar` rules (specificity 0,1,0) and crushed the
+  // full-width horizontal bar into a tiny broken rail — see issue #27.
+  @media (min-width: 641px) {
+    &.collapsed {
+      width: 4.25rem;
+      padding-left: var(--space-sm);
+      padding-right: var(--space-sm);
 
-    .app-sidebar__top {
-      flex-direction: column;
-      gap: var(--space-sm);
-      padding-left: 0;
-      padding-right: 0;
-    }
+      .app-sidebar__top {
+        flex-direction: column;
+        gap: var(--space-sm);
+        padding-left: 0;
+        padding-right: 0;
+      }
 
-    .app-sidebar__brand-full {
-      display: none;
-    }
+      .app-sidebar__brand-full {
+        display: none;
+      }
 
-    .app-sidebar__brand-mark {
-      display: block;
-    }
+      .app-sidebar__brand-mark {
+        display: block;
+      }
 
-    .app-sidebar__collapse-toggle svg {
-      transform: rotate(180deg);
-    }
+      .app-sidebar__collapse-toggle svg {
+        transform: rotate(180deg);
+      }
 
-    .app-sidebar__nav a,
-    .app-sidebar__settings-toggle,
-    .app-sidebar__account-toggle {
-      justify-content: center;
-      padding-left: 0;
-      padding-right: 0;
-    }
+      .app-sidebar__nav a,
+      .app-sidebar__settings-toggle,
+      .app-sidebar__account-toggle {
+        justify-content: center;
+        padding-left: 0;
+        padding-right: 0;
+      }
 
-    .app-sidebar__settings-toggle-left {
-      gap: 0;
-    }
+      .app-sidebar__settings-toggle-left {
+        gap: 0;
+      }
 
-    .label,
-    .chevron {
-      display: none;
-    }
+      .label,
+      .chevron {
+        display: none;
+      }
 
-    .app-sidebar__version {
-      display: none;
-    }
+      .app-sidebar__version {
+        display: none;
+      }
 
-    // The popover would otherwise shrink to the icon rail's own width,
-    // squashing "Mon compte"/"Se déconnecter" — give it a normal,
-    // comfortable width instead, still anchored to the rail's left edge.
-    .app-sidebar__account-menu {
-      left: 0;
-      right: auto;
-      width: 12rem;
+      // The popover would otherwise shrink to the icon rail's own width,
+      // squashing "Mon compte"/"Se déconnecter" — give it a normal,
+      // comfortable width instead, still anchored to the rail's left edge.
+      .app-sidebar__account-menu {
+        left: 0;
+        right: auto;
+        width: 12rem;
+      }
     }
   }
 }