Use page-level scroll in main layout

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

@@ -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,
       )}
     >