mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-10-24 04:33:17 +00:00
rcourtman
bbccd624b2
## Problem
The desktop Alerts → History table gave every visible column an equal
share: 16.7%, 14.3% or 11.1%, depending on how many columns the card can
show. So Message, the column that says what happened, got the same
100–160px as Timestamp:
- **Message:** at most 21 of 106 messages read in full at any width
("Kubernetes Clust…", "Docker container…"). Users had to open each row
to see what fired.
- **Status:** "acknowledged" (98px) was cut at a 1024px viewport, where
Status got 100px.
## Change
Each `<col>` now reads its width from a per-column custom property
(`--alert-history-<column>-width`), which the table sets at each density
in `index.css`. The existing visibility classes and density breakpoints
are unchanged, plus a new density at an 80rem card. Shares are sized for
the narrowest card at each density:
- **Content-sized:** Timestamp, Severity, Duration, Status (fits
"acknowledged"), Type and Node get what their content needs.
- **Protected:** Resource and Node keep at least their old share, so
they don't truncate more.
- **Actions:** the row buttons stay within two lines, and fit on one
line from an 80rem card.
- **Message:** takes the rest.
The table width still compensates for the collapsed tracks (it's the sum
of all nine track widths), so the visible columns fill the card exactly.
`App.architecture.test.ts` checks that arithmetic at every density, and
`Alerts.helpers.test.ts` pins the per-column tracks.
## Verification
Mock-mode private stack on main 1dcf9418aa, before against after, 106
rows, 15 widths from 768 to 1920px:
| Viewport | Messages fully readable (main → after) |
|---|---|
| 768 | 0 → 4 |
| 1280 | 8 → 39 |
| 1440 | 15 → 66 |
| 1760 | 17 → 83 |
| 1920 | 21 → 87 |
The only width with no gain is the 600px card at a 1024px viewport,
where the navigation rail leaves six columns very little room; it's 0 on
both main and this change.
- **Nothing worse:** every pill fits. Resource and Node truncate exactly
as often as on main at every width, and no header clips.
- **Layout:** the table width equals the card at every width, with no
scrollbar. Median row height is unchanged except from 1760px, where it
halves from 75 to 39px because the actions fit on one line.
- **Interactions:** the Timeline and Resource panels still open inline
and close at 1024, 1280 and 1760px. No console errors.
- **Tests:** 113 test files across `src/features/alerts`, `src/pages`,
`src/__tests__` and `src/components/Alerts` pass. The new pins fail
against main's source.
The browser receipt is
`frontend-modern/browser-verification/1f8abaa05e35815a.json`.