## What changes for users
**Alerts › History** picked its table or its phone cards by screen
width: the table from 768px up. With the Alerts sidebar open, though, a
1024px to roughly 1240px window leaves the table only a 600–800px card.
At that width the table:
- stacks its three row actions on top of each other;
- breaks resource names mid-word ("inventory-/api");
- cuts messages off after two lines.
The cards are now chosen by the card's own width:
| Window | History card | Layout |
| --- | --- | --- |
| 1280px, sidebar open | 837px | table (unchanged) |
| 1024px, sidebar open | 602px | cards, full names and messages |
| 900px (sidebar becomes tabs) | 774px | cards |
| 375px phone | 341px | cards (unchanged) |
An open timeline or resource view follows you across the switch: it
moves into the cards' drawer when the window narrows, and back into the
table row when it widens.
## How
- **`AlertHistoryTableSection` measures its card.** It uses the
canonical `useObservedElementWidth` and shows the cards below 800px
(`ALERT_HISTORY_TABLE_MIN_WIDTH`), the width from which the row actions
share one line. Until the card is measured, the phone breakpoint decides
as before. The decision is a memo.
- **`AlertHistoryMobileList` takes an `active` signal** in place of its
own `matchMedia('(min-width: 768px)')`. It memoises that signal and
moves the shared expansion state into its drawer only when the layout
actually changes. Without the memo, every resized pixel re-ran that move
and could reopen a drawer the operator had closed.
- **Both layouts stay mounted, as before.** The hidden one gets
`hidden`.
- **`registry.json`.** `AlertHistoryMobileList.test.tsx` and
`AlertHistoryTableSection.test.tsx` join the alerts frontend-surface
proof files. They are the tests that prove this surface.
## Verification
- **Tests.** New tests cover:
- the width decision (`AlertHistoryTableSection.test.tsx`);
- layout handover and the memo through a width-derived signal
(`AlertHistoryMobileList.test.tsx`). With the list's memo removed, that
test fails.
All four new or changed tests fail against main.
- **Suites.** The alerts, Alerts components and pages suites pass (2,497
tests). tsc, prettier, the copy, canonical-platform and form-label
audits, and the bundle check are clean.
- **Live (mock estate).** The table-or-cards results match the table
above. A card timeline opens the drawer at 1024px. An inline timeline
survives 1280 → 1024 → 1280. The 375px phone has no sideways scroll.
- **E2E.** The Playwright desktop project (Desktop Chrome, 1280px) keeps
the table.
- The browser receipt is included.
rcourtman
898981c6d8