fix: graph settings panel viewport-capped like the coverage dropdown

The settings panel (16 sliders ≈ 900px) overflowed past the window
bottom at short heights and stretched the whole page scrollable. The
coverage dropdown's pattern is the standard for top-anchored popups
overflowing viewport bounds: max-h-[60vh] keeps a floor of free space
above the window bottom at any height, and the inner column gets
overflow-y-auto (which also zeroes the flex item's automatic
min-height so it actually shrinks) — the panel scrolls internally, the
page never scrolls.

Live-verified in the dev shell at emulated 640px and 1000px viewports:
panel caps at exactly 60vh (384px @ 640h, 192px bottom gap), inner
scroll reaches the physics section (412px travel), docScrollable false
at both heights.
This commit is contained in:
amosblomqvist
2026-09-17 20:16:12 +03:00
parent 2d3f0e0412
commit d1ba0c5c3c
+7 -2
View File
@@ -242,8 +242,13 @@ function GraphSettingsControl({
<SettingsIcon className="size-4" />
</button>
{open && (
<div className="absolute right-0 top-full mt-2 w-64 rounded-xl border bg-card/85 p-2.5 shadow-lg backdrop-blur">
<div className="flex flex-col gap-2">
// Viewport-capped + internally scrollable — the coverage
// dropdown's exact pattern (owner, 2026-09-17): max-h keeps a
// floor of free space above the window bottom at any height,
// and the overflow-y-auto column (which also zeroes the flex
// item's min-height) scrolls instead of stretching the page.
<div className="absolute right-0 top-full mt-2 flex max-h-[60vh] w-64 flex-col rounded-xl border bg-card/85 p-2.5 shadow-lg backdrop-blur">
<div className="flex flex-col gap-2 overflow-y-auto">
{/* Size/zoom/region sliders: LADDER-mapped 0-100, step 10 (11
stops, every DEFAULT dead-center at 50, every value a nice
number — src/core/render-settings.ts). Physics keeps the