From 8475dd3d2d81a58fee20e2b9d97e046210aff501 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslef53@gmail.com>
Date: Fri, 21 Aug 2026 07:56:26 +0200
Subject: [PATCH] =?UTF-8?q?fix(layout):=20la=20sidebar=20r=C3=A9duite=20?=
 =?UTF-8?q?=C3=A9crasait=20la=20barre=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`isCollapsed` (rail icône seule sur desktop) persiste dans localStorage
indépendamment de la largeur de fenêtre — un utilisateur ayant réduit la
sidebar sur desktop puis ouvrant la même session sur mobile (ou réduisant
la fenêtre sous 640px) gardait `.app-sidebar.collapsed` (spécificité
0,2,0 : width 4.25rem, flex-direction column), qui l'emportait sur la
règle mobile `@media (max-width: 640px)` (spécificité 0,1,0) censée passer
la sidebar en barre horizontale pleine largeur.

Le bloc `&.collapsed` est maintenant scopé sous `@media (min-width: 641px)`
— le complément exact du breakpoint mobile — donc il ne s'applique plus du
tout en dessous.

Vérifié dans le navigateur : sidebar collapsed=true dans localStorage,
viewport 375px — la sidebar calcule bien width: 375px / flex-direction:
row (barre horizontale pleine largeur) au lieu de 4.25rem/column.

Closes #27

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/src/layouts/AppLayout.scss | 98 ++++++++++++++++-------------
 1 file changed, 55 insertions(+), 43 deletions(-)

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;
+      }
     }
   }
 }