From 1c362c2d1f8f4fa6ad3e5ee25a9878f774dfdfa9 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslef53@gmail.com>
Date: Wed, 19 Aug 2026 07:49:52 +0200
Subject: [PATCH] =?UTF-8?q?fix(web):=20sidebar=20reste=20fixe=20sur=20page?=
 =?UTF-8?q?=20longue,=20page=20Liste=20de=20courses=20centr=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 apps/web/src/layouts/AppLayout.scss    | 17 ++++++++++++++++-
 apps/web/src/pages/ComingSoonPage.scss |  5 +++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/layouts/AppLayout.scss b/apps/web/src/layouts/AppLayout.scss
index a58c09b..3615e4f 100644
--- a/apps/web/src/layouts/AppLayout.scss
+++ b/apps/web/src/layouts/AppLayout.scss
@@ -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);
 }
 
diff --git a/apps/web/src/pages/ComingSoonPage.scss b/apps/web/src/pages/ComingSoonPage.scss
index 122f5dc..1121fff 100644
--- a/apps/web/src/pages/ComingSoonPage.scss
+++ b/apps/web/src/pages/ComingSoonPage.scss
@@ -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);