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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user