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

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

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

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