vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dashboard: msgrow flex layout — fix per-char wrap when paths linkify

Browse source
This commit is contained in:
müde 2026-05-17 23:20:29 +02:00
parent c2c475bd65
commit 2ad5a94897
1 changed files with 28 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

29
hive-c0re/assets/dashboard.css
View file

@ -631,7 +631,34 @@ summary:hover { color: var(--purple); }
hive-fr0nt::TERMINAL_CSS). The msgrow / msg-* rules below are hive-fr0nt::TERMINAL_CSS). The msgrow / msg-* rules below are
dashboard-specific: each broker event becomes a grid of timestamp + dashboard-specific: each broker event becomes a grid of timestamp +
arrow + from/sep/to + body inside the `.row` shell. */ arrow + from/sep/to + body inside the `.row` shell. */
.live .msgrow { display: grid; grid-template-columns: auto auto auto auto auto 1fr; gap: 0.6em; align-items: baseline; padding: 0.1em 0; } /* Flex (not grid): the row carries the header chips (ts / arrow /
from / → / to / body) inline, and may also carry one or more
`<details>` path-preview siblings appended by appendLinkified.
Grid would treat each preview as an extra grid item in a fixed
column template, distorting the header column widths. Flex
collapses whitespace-only text nodes between items, gives `body`
the remaining width via `flex: 1`, and lets each preview claim a
full-width row of its own via `flex-basis: 100%`. */
.live .msgrow {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5em;
padding: 0.1em 0;
}
.live .msgrow .msg-body {
flex: 1 1 0;
/* min-width: 0 lets the body shrink below its longest token so
`word-break: break-word` actually kicks in instead of forcing
the whole flex line wider than the container. */
min-width: 0;
}
.live .msgrow > .path-preview {
flex: 1 0 100%;
/* line up with the message body — no left chrome inherited from
the global .path-preview indent. */
margin-left: 0;
}
.live .msgrow.sent .msg-arrow { color: var(--cyan); } .live .msgrow.sent .msg-arrow { color: var(--cyan); }
.live .msgrow.delivered .msg-arrow { color: var(--green); } .live .msgrow.delivered .msg-arrow { color: var(--green); }
.msg-ts { color: var(--muted); font-size: 0.85em; } .msg-ts { color: var(--muted); font-size: 0.85em; }