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

fix(web): sidebar reste fixe sur page longue, page Liste de courses centrée

Browse source 
- AppLayout: .app-layout passe de min-height:100vh à height:100vh +
  overflow:hidden, et .app-content devient le vrai conteneur de scroll
  (overflow-y:auto). Avant, une page plus haute que le viewport faisait
  défiler tout le document, entraînant la sidebar avec lui au lieu de la
  garder fixe.
- ComingSoonPage (page "Liste de courses"): ajoute margin:0 auto, comme
  .settings-page, au lieu de rester collée au bord gauche avec un grand
  espace vide à droite sur les écrans larges.
This commit is contained in:
Nicolas 2026-08-19 07:49:52 +02:00
parent c34eaa89d0
commit 1c362c2d1f
2 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,8 +7,14 @@
// No `@use` of the theme partial needed here — see HomePage.scss's identical
// note: every token below is a CSS custom property, available at runtime.
// `height` (not `min-height`): the layout must stay pinned to exactly the
// viewport, never grow taller than it — otherwise a tall page scrolls the
// whole document, dragging the sidebar out of view with it. `overflow:
// hidden` backs that up so nothing can force the document itself to grow;
// `.app-content` below is the one place that actually scrolls.
.app-layout {
min-height: 100vh;
height: 100vh;
overflow: hidden;
display: flex;
background: var(--color-background);
}
@ -27,6 +33,10 @@
background: var(--color-surface);
border-right: 1px solid var(--color-border);
transition: width 0.15s ease;
// Own scroll, independent of `.app-content` — only matters on a very
// short viewport with a long nav, but keeps the rail from ever forcing
// `.app-layout` past 100vh.
overflow-y: auto;
&__top {
display: flex;
@ -315,6 +325,11 @@
// Content can scroll independently of the sidebar (e.g. a long planning
// table) without the fixed-width rail ever needing to shrink.
min-width: 0;
// The actual scroll container: `.app-layout` is pinned to `height: 100vh`
// above, so a page taller than the viewport scrolls in here instead of
// scrolling the document (which would drag the sidebar along with it).
min-height: 0;
overflow-y: auto;
padding: var(--space-xl);
}

5
apps/web/src/pages/ComingSoonPage.scss
View file

@ -2,8 +2,13 @@
// Styles for ComingSoonPage — shared by every stub section page.
// =============================================================================
// Centered, not pinned to `.app-content`'s left edge — same reasoning as
// `.settings-page` (settings-pages.scss): on a wide desktop viewport a
// left-aligned `max-width` here just left a lopsided gap down the right
// side instead of framing the placeholder copy.
.coming-soon-page {
max-width: 40rem;
margin: 0 auto;
p {
color: var(--color-text-muted);