From d1ba0c5c3cf8ba75c13b4dd1dbb3614b25f5fefb Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Thu, 17 Sep 2026 20:16:12 +0300
Subject: [PATCH] fix: graph settings panel viewport-capped like the coverage
 dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 components/graph-view.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/graph-view.tsx b/components/graph-view.tsx
index aa0dcd4..1e6bd30 100644
--- a/components/graph-view.tsx
+++ b/components/graph-view.tsx
@@ -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