vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

shared terminal: align row icons via a shared grid, not offsets

Browse source 
Per mara's screenshot report (agent-terminal icons not aligned in the
first column) — and her explicit follow-up steer on the first version of
this fix: 'dont do it by offsets at all, it should be part of the layout
that they align.'

Root cause traced first, not guessed: .row-glyph relied on inheriting
text-indent: -1.4em from .live .row to paint its glyph in the reserved
prefix slot; details.row > summary separately reset text-indent: 0 for
its own hanging-caret needs, which also zeroed the inherited value for
the icon nested inside it (indent inherits by computed value, not by
rule). Two independently-computed offsets that had to agree by hand,
and silently didn't.

Replaced the whole offset scheme with a real structural fix: every row
is a 2-column CSS grid (icon column, width from one shared
--row-icon-col custom property, then content column), and a details
row grids its own <summary> with the exact same grid-template-columns
value instead of griding itself (so its <pre> body still stacks full
width below, not squeezed into column 2). Icon and content are placed
by explicit grid-column, not auto-placement inference, so an icon-less
row's lone child still lands in the content column. .row-content is a
new wrapper class (Row.tsx, terminal.js's row()/mutableRow()/
placeholder()) giving that content an element the grid can target by
class - a DocumentFragment (what linkify() returns) doesn't persist as
a node once appended, so without an explicit wrapper there was nothing
for the grid to place.

Caught and fixed a second real bug while building this for real (not
just reasoning about the CSS): the first draft's details.row { display:
block } had lower specificity than .live .row's display: grid and never
actually applied, squeezing <summary> into the row's own 1.4em icon
column and wrapping its text one character per line. Needed
.live details.row to out-specify it.

Verified with a headless-chromium render of all 6 row shapes (flat
icon / flat icon-less / flat markdown-body / details icon / details
icon-less / a long-wrapping flat row) - all align and wrap correctly.
Also verified via the earlier Range.getBoundingClientRect() measurement
(glyph paint position, not just the element's own box): diff 0.00 for
both this and the previous fix, but only this one is structural rather
than two numbers that happen to still agree today.
This commit is contained in:
iris 2026-09-09 19:29:58 +02:00 • committed by mara
commit adfb0f9e02
4 changed files with 123 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

15
docs/web-ui/terminal-rendering.md
View file

@ -20,11 +20,16 @@ separate client-side row model or classification step.
## Layout
Every row shares one prefix column via `padding-left` + negative
`text-indent` on `.live .row`; an icon (when set) sits in a fixed-width
`.row-glyph` cell so icons of different rendered widths still line up.
`<details>` summaries reuse the same metrics, with the disclosure caret
leading the summary text rather than the icon.
Every row is its own 2-column grid — icon column (`.row-glyph`, width
from the `--row-icon-col` custom property) then content column
(`.row-content`, or a markdown body's own `.md` class) — so an icon's
left edge lands in the same place regardless of row kind. A `<details>`
row grids its `<summary>` instead of itself (so the `<pre>` body below
can stack full-width), using the exact same `grid-template-columns` value,
with the disclosure caret leading the summary text rather than the icon.
One shared column definition, not two independently-computed offsets
kept in sync by hand — see `terminal.css`'s own comment on the incident
that motivated the change.
## Levels