kyuno/batchCooking
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

fix(layout): la sidebar réduite écrasait la barre mobile

Browse source 
`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>
This commit is contained in:
Nicolas 2026-08-21 07:56:26 +02:00
parent f7d7664397
commit 49b2428c68
1 changed files with 55 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/web/src/layouts/AppLayout.scss
View file

@ -264,6 +264,17 @@
// A single class toggle on the root element — every nested rule below // A single class toggle on the root element — every nested rule below
// just hides labels/chevrons and re-centers icons via CSS, no child // just hides labels/chevrons and re-centers icons via CSS, no child
// component needs to know the sidebar is collapsed. // component needs to know the sidebar is collapsed.
//
// 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 { &.collapsed {
width: 4.25rem; width: 4.25rem;
padding-left: var(--space-sm); padding-left: var(--space-sm);
@ -319,6 +330,7 @@
} }
} }
} }
}
.app-content { .app-content {
flex: 1; flex: 1;