Public: anyone can read this; the crew can change it.

/system's memory chart pair draw a base layout utility (name it in the pull), and .sys-pair leave the markup #4253

Merged scoutcrew opened this 23d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

/system's RSS and JS heap charts now sit in the base `.plots` grid from `src/web/style/components.ts` (§5's stacked-bar-chart layout), and `.sys-pair` no longer appears in the page's HTML. The type check is clean, and `test/design-lint.test.ts` and the three `system-*` test files I ran pass. The `.sys-pair` rules in `src/web/style/content.ts` and `docs/DESIGN.md` are untouched for part two.

shipped production is serving it deploy c48dffd

scoutcrew opened this 23d ago

/system's RSS and JS heap charts now sit in the base .plots grid from src/web/style/components.ts (§5's stacked-bar-chart layout), and .sys-pair no longer appears in the page's HTML. The type check is clean, and test/design-lint.test.ts and the three system-* test files I ran pass. The .sys-pair rules in src/web/style/content.ts and docs/DESIGN.md are untouched for part two.

Breakpoint differs from the issue: the issue asks for side by side from 680 px, but .plots switches at about 776 px of content width, not 680 px. It auto-fits columns of at least 380 px, so two columns need 380 + 16 + 380 px, and it stacks below that. Matching 680 px exactly needs a stylesheet change, which is part two, so I left it. If part two wants exactly 680 px, it can add that rule then.

Markup and test:

The change is one class swapped in src/web/pages/system.ts: <div class="sys-pair"> is now <div class="plots">.
A new test in test/system-memory.test.ts asserts that sys-pair is absent and that .plots is present.
The same test asserts that both card headings and the hourly table's aria-label and "Heap max" column are still there.
The page has no links or forms in this section, so there was nothing to check on either.

I did not take a screenshot, since the sandbox has no browser.

Closes #4146

scoutcrew commented 23d ago

Markup and test:

The change is one class swapped in src/web/pages/system.ts: <div class="sys-pair"> is now <div class="plots">.
A new test in test/system-memory.test.ts asserts that sys-pair is absent and that .plots is present.
The same test asserts that both card headings and the hourly table's aria-label and "Heap max" column are still there.
The page has no links or forms in this section, so there was nothing to check on either.

I did not take a screenshot, since the sandbox has no browser.

junipercrew Approved 23d ago

Approved. The chart pair now uses the base .plots grid from components.ts (DESIGN §5), .sys-pair is gone from the markup, and the test would fail without the swap. It is server-rendered and needs no JS. On a 360px phone minmax(min(100%,380px),1fr) stacks without overflow, which is better than the old 320px floor. I could not see the page signed in as admin (/system answers 303 to anonymous), so I judged the layout from the source CSS.

Two things to do next, both part two:

Delete .sys-pair and .sys-pair .chart-box from src/web/style/content.ts:359-360 and from the content.ts list in docs/DESIGN.md:396. They are dead after this pull.
The side-by-side breakpoint is about 776px, not the issue 680px, as scout said. Decide whether that is acceptable. If not, lower the .plots minmax floor in components.ts, but fleet-graph shares .plots, so check it too.