fix(console): fleets.toml/agents.toml editor fills to the window bottom - #95
Conversation
Brett: empty space under "edit fleets.toml" — the bottom panel should align
with the window box.
`.cfg-editor-mount .cm-editor` was capped at a flat `max-height: 320px`,
leaving a growing chunk of blank space below it on anything taller than
that. Replaced with a live-measured `--cfg-editor-h` (same pattern as
`--topbar-h` from the Debug drawer fix) — `syncEditorHeight()` sets it to
`window.innerHeight - editorMount's top - 16px` whenever the editor opens,
and stays in sync on `resize` (the window is resizable, and the space above
the editor — the Fleets row's height — isn't constant either).
## Verification
- `tsc --noEmit` — clean
- `vitest run` — 97/97 passing (no logic under test touched)
- `vite build` — clean
- Playwright: confirmed the editor now sits 15px (the intentional bottom
margin) from the window's bottom edge instead of stopping at 320px with
open space below.
🤖 Generated by Orca ('ecs-claude').
…dow bottom
Brett: the two-column style doesn't match; Fleets panel isn't scaled to the
same height as Agent chat, looks weird; when there's no edit panel the
bottom is all empty.
`.drilldown-row` used `align-items: flex-start`, so each column sized to its
own content — a short Fleets card list next to a taller Agent-chat panel,
with a big stretch of bare page background below both. Switched to
`align-items: stretch` + a live-measured floor (`--drilldown-row-h`, same
pattern as `--topbar-h`/`--cfg-editor-h`) so both columns match height and
reach the window's bottom edge when content is shorter than that:
- `.drilldown-main`'s visible child (`#config`/`#fleet-detail`/`#deploy-wrap`
— whichever isn't `[hidden]`) grows to fill the stretched column, and
`.config`'s own bordered box grows with it, so the Fleets box's border
now extends to match Agent chat's height instead of stopping short.
`#deploy-wrap` gets this for free (it's the bordered box directly, no
extra wrapper level). Added the by-now-familiar `[hidden]` override
(`.drilldown-main > *[hidden]`) — `.drilldown-main > *`'s `display: flex`
ties the UA `[hidden]` rule on specificity and would otherwise render a
hidden sibling as an empty flex box (same trap as `.debug-drawer[hidden]`/
`.deploy-identity[hidden]`, caught before shipping this time).
- `.chat-wrap`/`.chat-log` on the Agent chat side now flex-grow too, so any
extra height `stretch` gives the column goes into the chat log itself
(dropped its flat 560px cap — the row's own floor is the real ceiling now)
rather than sitting as blank flex-gap below it.
- Dropped `.config-wrap`'s stray `margin-bottom: 16px`, the last few px of
mismatch between the two columns once the rest of this landed.
Scoped to the top-level Fleets screen (`.config`) — Brett's screenshot was
specifically that screen. Fleet-detail's roster/agent-console box still
sizes to its own content (didn't extend it — its nested two-piece border
makes that a separate, smaller job); flag if that should match too.
## Verification
- `tsc --noEmit` — clean
- `vitest run` — 97/97 passing (no logic under test touched)
- `vite build` — clean
- Playwright: confirmed `.config` and the Agent chat column now bottom out
at the identical y-coordinate (0px diff, was ~803px vs 673px tall before);
spot-checked fleet-detail and the deploy panel don't regress, and that
switching screens correctly computes `display: none` for the hidden ones
(the `[hidden]` override actually works, not just present in the CSS).
🤖 Generated by Orca ('ecs-claude').
|
Second commit — same "empty space, should fill the window" theme, this time the two-column row itself. `.drilldown-row` used `align-items: flex-start`, so the Fleets column (short — just a card list) and the Agent chat column (taller, min-height'd chat log) never matched height, leaving a stubby Fleets box next to a lot of bare page below it. Switched to `align-items: stretch` + a live-measured floor (`--drilldown-row-h`, same pattern as `--topbar-h`/`--cfg-editor-h` from the first commit) so both columns match and reach the window's bottom edge when content is shorter than that — the Fleets box's own border now grows with the column instead of stopping short, and the Agent chat log absorbs the extra height instead of leaving blank flex-gap below it. Caught the recurring `[hidden]`-vs-equal-specificity trap (`.debug-drawer[hidden]`/`.deploy-identity[hidden]` from earlier PRs) before shipping this time — added `.drilldown-main > *[hidden] { display: none }` since `.drilldown-main > *`'s `display: flex` would've tied it otherwise. Scoped to the top-level Fleets screen specifically (Brett's screenshot). Fleet-detail's roster box still sizes to its own content — didn't extend it since its border is a two-piece thing (header + roster) and Brett hasn't flagged that screen; happy to take it on if it should match too. `tsc`/vitest (97/97)/`vite build` clean. Verified `.config` and the Agent chat column now bottom out at the identical y-coordinate (was ~803px vs 673px tall), and that switching screens still correctly computes `display: none` for whichever's hidden. |
1 participant
Brett: empty space under "edit fleets.toml" — the bottom panel should align with the window box.
Root cause
.cfg-editor-mount .cm-editorwas capped at a flatmax-height: 320px, leaving a growing chunk of blank space below it on anything taller than that.Fix
Replaced with a live-measured
--cfg-editor-h(same pattern as--topbar-hfrom the Debug drawer fix) —syncEditorHeight()sets it towindow.innerHeight - editorMount's top - 16pxwhenever the editor opens, and stays in sync onresize(the window is resizable, and the space above the editor — the Fleets row's height — isn't constant either).Verification
tsc --noEmit— cleanvitest run— 97/97 passingvite build— clean🤖 Generated by Orca ('ecs-claude').