From 8fb688f19c5db5cb65bedd82e40df55b454a8b5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Sibiril?=
 <81782+aureliensibiril@users.noreply.github.com>
Date: Thu, 16 Apr 2026 12:27:24 +0200
Subject: [PATCH] Use page-level scroll in main layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous layout nested two scroll regions, sidebar and main, each
with its own scrollbar. Combined with the fixed 100vh flex container,
any child overflow (notably the sidebar nav) spilled past bg-level-0
and exposed the browser's default white background -- most visible in
dark mode as a white strip at the bottom of the viewport.

Switch to a single page-level scroll: pin the header with fixed, let
the wrapper grow with min-h-screen, and drop main's internal overflow.
The drawer becomes fixed too so it stays pinned while the page scrolls
and gets an opaque background to cover scrolled content behind it.

Signed-off-by: Aurélien Sibiril <81782+aureliensibiril@users.noreply.github.com>
---
 packages/ui/src/Layouts/Layout.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/Layouts/Layout.tsx b/packages/ui/src/Layouts/Layout.tsx
index 641704f24..647e858c1 100644
--- a/packages/ui/src/Layouts/Layout.tsx
+++ b/packages/ui/src/Layouts/Layout.tsx
@@ -55,8 +55,8 @@ export function Layout({
   );
   return (
     <LayoutContext value={layoutContext}>
-      <div className="text-txt-primary bg-level-0">
-        <header className="absolute z-2 left-0 right-0 px-4 flex items-center border-b border-border-solid h-12 bg-level-0">
+      <div className="text-txt-primary bg-level-0 min-h-screen">
+        <header className="fixed top-0 z-2 left-0 right-0 px-4 flex items-center border-b border-border-solid h-12 bg-level-0">
           <Link to="/">
             <Logo className="w-12 h-5" />
           </Link>
@@ -77,11 +77,11 @@ export function Layout({
           )}
           <div className="ml-auto">{headerTrailing}</div>
         </header>
-        <div className="flex h-screen" id="main">
+        <div className="flex min-h-screen" id="main">
           {sidebar && <Sidebar>{sidebar}</Sidebar>}
           <main
             className={clsx(
-              "overflow-y-auto w-full mt-12 transition-all duration-300 h-[calc(100vh-48px)]",
+              "w-full mt-12 transition-all duration-300",
               hasDrawer && "pr-105",
             )}
           >
@@ -111,7 +111,7 @@ export function Drawer({
   return createPortal(
     <aside
       className={clsx(
-        "absolute pt-20 top-0 right-0 w-105 px-6 pb-8 border-border-solid border-l h-screen",
+        "fixed pt-20 top-0 right-0 w-105 px-6 pb-8 border-border-solid border-l h-screen bg-level-0",
         className,
       )}
     >