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

dashboard: connect tree-prefix vertical bars across taller rows (#388)

Browse source 
The container-row tree-prefix used text box-drawing glyphs (├ └ │)
positioned with `top: 0.6em` — a single text-line tall. Once rows
grew past one line (5em square icon + multi-line body), the `│`
columns of consecutive siblings no longer touched, leaving visible
breaks in the tree.

Replace the text-glyph string with structured DOM: one `.tree-lane`
per depth column. Continuation lanes (`.lane-line`) paint a 1px
border-left spanning the full row height + the `.containers` gap
below, so adjacent siblings' bars visually merge into one unbroken
vertical. The row's own joint lane is `├` (branch — bar continues
below) or `└` (last — bar stops at icon midline), with a horizontal
stub at 3.1em (row padding-top + icon half-height) reaching to the
icon edge.

Joint y / stub width are derived from the 5em icon + 0.6em row
padding-top + 0.8em row padding-left so they meet the icon cleanly.
This commit is contained in:
iris 2026-05-25 00:32:15 +02:00 • committed by Mara
commit 7743c07380
2 changed files with 89 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

74
frontend/packages/dashboard/src/dashboard.css
View file

@ -204,18 +204,76 @@ a:hover {
.container-row[data-depth="4"] { margin-left: 7.2em; }
.container-row[data-depth="5"] { margin-left: 9em; }
.container-row[data-depth="6"] { margin-left: 10.8em; }
/* Tree prefix sits in the left margin and paints the connecting
├ / └ / │ lanes as CSS rules rather than text glyphs (#388). Each
ancestor depth gets its own `.tree-lane` so we can paint a
full-row-height vertical bar that extends through the
.containers row gap into the next sibling — text box-drawing
glyphs only fill one text line, which left visible breaks
between rows once cards grew taller than one line of text (5em
square icons + multi-line body). The horizontal stub at the row's
own joint lands at the icon midline so the L/T meets the icon
edge cleanly. */
.container-row .tree-prefix {
/* Tree-line glyphs sit in the left margin so the rest of the
container card layout (icon + body flex split) stays unchanged.
Mono font for column alignment with the ├─ / └─ / │ bricks. */
position: absolute;
left: -1.6em;
top: 0.6em;
color: var(--purple-dim);
font-family: inherit;
white-space: pre;
/* Extend into the `.containers { gap: 0.4em }` below so vertical
bars connect to the next sibling's prefix without a visual gap. */
top: 0;
bottom: -0.4em;
display: flex;
flex-direction: row;
pointer-events: none;
user-select: none;
color: var(--purple-dim);
}
/* Each depth step is one 1.8em lane wide — same step as the row's
own margin-left ladder above, so the rightmost lane (the joint)
sits flush against the row content (the icon). The prefix's left
edge is depth*1.8em LEFT of the row's left edge, so its right
edge meets the icon, and the leftmost lane lines up with the
top-level rows' icons at x=0. */
.container-row[data-depth="1"] .tree-prefix { left: -1.8em; }
.container-row[data-depth="2"] .tree-prefix { left: -3.6em; }
.container-row[data-depth="3"] .tree-prefix { left: -5.4em; }
.container-row[data-depth="4"] .tree-prefix { left: -7.2em; }
.container-row[data-depth="5"] .tree-prefix { left: -9em; }
.container-row[data-depth="6"] .tree-prefix { left: -10.8em; }
.tree-prefix .tree-lane {
flex: 0 0 1.8em;
position: relative;
}
/* Continuation bar — full row + gap below (so two adjacent
ancestor-line lanes from sibling rows visually merge into one
unbroken vertical line). Drawn at lane center (0.6em from left)
to keep it visually centered in the 1.8em column. */
.tree-prefix .lane-line::before,
.tree-prefix .lane-joint::before {
content: '';
position: absolute;
left: 0.6em;
top: 0;
bottom: 0;
border-left: 1px solid currentColor;
}
/* Last-child joint (└): vertical bar stops at the icon midline (no
continuation below this row). 3.1em ≈ row padding-top 0.6em +
icon half-height 2.5em, matching the horizontal stub's y below. */
.tree-prefix .lane-joint-last::before {
bottom: auto;
height: 3.1em;
}
/* Horizontal stub from the joint's vertical bar across the lane
and through the row's padding-left to the icon left edge. Lands
at the icon midline so the ├/└ meets the icon cleanly.
Width = lane-right (1.2em from lane center) + row padding-left
(0.8em) = 2em. */
.tree-prefix .lane-joint::after {
content: '';
position: absolute;
left: 0.6em;
top: 3.1em;
width: 2em;
border-top: 1px solid currentColor;
}
/* Live cards get the icon-left / body-right split; tombstone rows keep
the plain stacked block layout. The icon is a background-image div