mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-10-23 20:25:56 +00:00
Size Alert History columns to content so messages read (#2537)
## 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`.
This commit is contained in:
@@ -1081,6 +1081,15 @@ presentation and sort below warnings, while the history facet exposes a real
|
||||
Info option whose count and filtered rows use the same predicate as every
|
||||
other severity.
|
||||
|
||||
The desktop alert history table sizes each column for its content instead of
|
||||
giving all visible columns an equal share. Timestamp, severity, duration,
|
||||
status, type and node get what their content needs (status fits
|
||||
"acknowledged"), Resource and Node keep at least their old share, the two row
|
||||
actions stay within two lines (one line from an 80rem card), and Message, the
|
||||
column that says what happened, takes the rest. Equal shares held Message to
|
||||
the same 100-160px as the timestamp, so at most a fifth of messages read in
|
||||
full at any width; from a 960px viewport a third to four fifths now do.
|
||||
|
||||
Alert history row timestamps render clock time in the viewer's own locale and
|
||||
must carry the absolute date and time as a title. The date otherwise lives
|
||||
only in the day group header, which scrolls out of sight, and a hardcoded
|
||||
|
||||
@@ -5868,6 +5868,11 @@ not overlap or create horizontal overflow. The 390px operator qualification
|
||||
must assert three visible labels, non-overlapping client rectangles, keyboard
|
||||
reachability, and a contained document before its actual-pixels receipt is
|
||||
recorded.
|
||||
The Alert History table's density tracks in `index.css` carry per-column widths
|
||||
through `--alert-history-<column>-width` custom properties set on the table at
|
||||
each density. Fixed layout sizes all nine tracks before collapsed ones are
|
||||
removed, so the visible widths sum to 100% and the table width is the sum of
|
||||
all nine; `App.architecture.test.ts` checks both at every density.
|
||||
Alert History investigation detail is also responsive by interaction model,
|
||||
not only by CSS. Desktop may keep Timeline and Resource incident detail inline
|
||||
with its table row, while the virtualized phone card list must open the shared
|
||||
|
||||
Reference in New Issue
Block a user