From b82b552886dd9578329a7d67087c2176a7dd7acd Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Mon, 13 Jul 2026 02:39:43 +0200
Subject: [PATCH] fix(header): restore inner scroll broken by the
 floating-header wrapper

The wrapper that pads content below the fixed header lacked min-h-0, so as a
flex child with min-height:auto it grew to its content's height instead of
staying bounded to the viewport. That let the whole document scroll (the fixed
header/nav stayed put while content ran off-screen). Add min-h-0 so the wrapper
stays viewport-height and the inner <main> keeps its own overflow scroll.
---
 frontend/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5867d50..3ea73a7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -819,7 +819,7 @@ export default function App() {
             wrapper clears it with a top pad — EXCEPT on Playlists, whose own left rail must reach
             the very top (it pads only its content pane internally instead). */}
         <div
-          className={`flex-1 min-w-0 flex flex-col ${page === "playlists" ? "" : "pt-[var(--hdr-h)]"}`}
+          className={`flex-1 min-w-0 min-h-0 flex flex-col ${page === "playlists" ? "" : "pt-[var(--hdr-h)]"}`}
         >
         {meQuery.data!.is_demo && <DemoBanner />}
         <VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />