feat(console): wider drag-resize budget for the two-column split - #96
Conversation
Brett: wants more adjustment budget for the left/right columns.
Widened splitPane.ts's clamp range from 280–900px to 220–1200px. Added a
360px floor on `.drilldown-main` (styles.css) so dragging the side toward
the new 1200px max can't crush the left column unreadable, and raised
`.drilldown-side`'s vw-relative backstop from 70vw to 85vw to match (it's a
safety net for window sizes the px bounds don't anticipate, not the primary
limit — was already narrower than the old 900px max on anything under
~1285px wide).
## Verification
- `tsc --noEmit` — clean
- `vitest run` — 97/97 passing (splitPane.test.ts asserts against the
exported MIN_WIDTH/MAX_WIDTH constants, not hard-coded numbers, so it
covers the new range automatically)
- `vite build` — clean
- Playwright: dragged to both extremes on a 1600px window — side bottoms
out at exactly 220px, tops out at exactly 1200px with `.drilldown-main`
correctly held to its 360px floor rather than being squeezed further.
🤖 Generated by Orca ('ecs-claude').
Brett: also wants to scale the size of the top/bottom (the drilldown row vs.
whatever's below it — today just the fleets.toml/agents.toml editor).
New `rowResize.ts`, same pure-clamp/persist + DOM-wiring split as
`splitPane.ts` (the left/right column version) but for height: drag
`#row-resizer` up/down to shrink/grow `.drilldown-row`, persisted to
localStorage, clamped 160–2000px.
The row has two modes now:
- Normal (editor closed): unchanged — auto-fills to the window's bottom
edge via `syncDrilldownHeight`'s `min-height`, no resizer shown (nothing
below to divide space against).
- Split (editor open): `.drilldown-row.is-split` swaps `min-height` for a
fixed `height` + `overflow-y: auto`, so it can be dragged shorter than its
content (which then scrolls inside the row) as well as taller.
`openEditor`/`closeEditor` (main.ts) toggle the class, show/hide the
resizer, and apply/restore the right height — `initRowResize`'s `onChange`
hook re-runs `syncEditorHeight` on every drag tick so the editor reflows
live instead of only after the drag ends.
## Verification
- `tsc --noEmit` — clean
- `vitest run` — 102/102 passing (5 new: rowResize.test.ts, mirrors
splitPane.test.ts)
- `vite build` — clean
- Playwright: confirmed the resizer is hidden/row auto-fills before the
editor opens; opening shows the resizer and switches to the 360px default
split height; dragging +150px grows the row and the editor's own fill
height shrinks to match live; closing restores full auto-fill and hides
the resizer again.
🤖 Generated by Orca ('ecs-claude').
|
Second commit — the "scale the size of the top, bottom" part (option 1: the row itself gets draggable height). New `rowResize.ts`, same pure-clamp/persist + DOM-wiring split as `splitPane.ts` but for height. Drag `#row-resizer` (appears between the row and the editor, only while the editor is open — with nothing below the row there's nothing to divide height against) up/down to shrink/grow `.drilldown-row`, persisted, clamped 160–2000px. Two modes: normal (editor closed) is unchanged — auto-fills to the window bottom, no resizer. Split (editor open) swaps to a fixed, draggable height with internal scroll if you drag it shorter than its content. `openEditor`/`closeEditor` toggle between them and `initRowResize`'s onChange hook keeps the editor's own fill-height in sync live as you drag, not just after release. `tsc`/vitest (102/102 — 5 new for rowResize.test.ts)/`vite build` clean. Verified the full open→drag→close cycle: resizer hidden + auto-fill before opening, resizer shown + 360px default split height on open, row grows and editor shrinks to match live while dragging, and closing restores full auto-fill + hides the resizer. |
1 participant
Brett: wants more adjustment budget for the left/right columns.
Widened splitPane.ts's clamp range from 280–900px to 220–1200px. Added a 360px floor on `.drilldown-main` so dragging the side toward the new 1200px max can't crush the left column unreadable, and raised `.drilldown-side`'s vw-relative backstop from 70vw to 85vw to match.
Verification
🤖 Generated by Orca ('ecs-claude').