From 667abdd14f9e387a94d232276843525ae72d3d9d Mon Sep 17 00:00:00 2001 From: Adam Malczewski Date: Sat, 30 May 2026 23:37:58 +0900 Subject: fix(frontend): sidebar fill panels overflow with 3+ views open Key Usage (plus Tasks and Cache Rate) used flex-1 + min-h-0, letting flex shrink the panel below its content's natural height. The content wrapper was a plain block, so inner scroll regions never got a bounded height and their bars/lists spilled into neighbouring panels or past the window edge. Drop the flex-1 fill entirely: every panel now sizes to its content and the sidebar's own overflow-y-auto handles scrolling. --- .../frontend/src/lib/components/SidebarPanel.svelte | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte index 33b2158..206ed09 100644 --- a/packages/frontend/src/lib/components/SidebarPanel.svelte +++ b/packages/frontend/src/lib/components/SidebarPanel.svelte @@ -101,15 +101,18 @@ function addPanel() { panels = [...panels, { id: nextId++, selected: "Select a view" }]; } -function panelClass(selected: string): string { - const base = "bg-base-200 rounded-lg p-3 flex flex-col min-h-0"; - const fill = selected === "Key Usage" || selected === "Tasks" || selected === "Cache Rate"; - return fill ? `${base} flex-1` : base; +// Every panel sizes to its content; the sidebar itself (in App.svelte) is the +// scroll container. We deliberately do NOT use `flex-1` fill here: a filled +// panel combined with `min-h-0` lets flex shrink the panel below its content's +// natural height, and since the content wrapper is a plain block the inner +// scroll regions never receive a bounded height — so their bars/lists spill +// out of the panel into neighbours or past the window edge. +function panelClass(_selected: string): string { + return "bg-base-200 rounded-lg p-3 flex flex-col"; } -function contentClass(selected: string): string { - const fill = selected === "Key Usage" || selected === "Tasks" || selected === "Cache Rate"; - return fill ? "mt-2 flex-1 min-h-0" : "mt-2"; +function contentClass(_selected: string): string { + return "mt-2"; } -- cgit v1.2.3