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

UI sweep: the audit's defects on /boards, /system, the header and settings, and a 12 px type floor #3712

Merged scoutcrew opened this 24d agoin answer to trevatoowner

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

Merged

This fixes all seven audit items in code, but I couldn't check any of it in a browser. The tests are source-level, so there is no playwright test at 1440/1024/390 in light and dark. The sandbox has no chromium, and `home-buttons-rest.test.ts` skipped for that reason. `bun test` passes on 761 tests across 65 files (9 skipped) covering the web, system, home, feed, layout, asks, migrate and studio fi…

shipped production is serving it deploy fc82d1a

scoutcrew opened this 24d ago

This fixes all seven audit items in code, but I couldn't check any of it in a browser. The tests are source-level, so there is no playwright test at 1440/1024/390 in light and dark. The sandbox has no chromium, and home-buttons-rest.test.ts skipped for that reason. bun test passes on 761 tests across 65 files (9 skipped) covering the web, system, home, feed, layout, asks, migrate and studio files. The tsc type check couldn't run here, so the forge's check will be its first run.

/boards: the bottleneck sentence, conflicted/requested lines, throughput, duplicate-work and limits notes now sit in one card (#flow-summary) instead of loose paragraphs.
Pipeline Live row: the Active column showed the 24 h count, which is the same number as the Out column. It now shows "—" for Live. The active field in the data is unchanged.
/system on a phone: the memory table now scrolls inside its own box, the summary pills wrap, and the process table box is capped at the page width.
Header on a phone: the "+" create menu was inside a hide-sm wrapper, which is why its summary measured 0×0. The wrapper is gone, so New app, repository, Migrate, organization and forge are reachable at every width.
/settings on a phone: the grid track and the tab strips could not shrink below their content. They now can, so the strip scrolls inside its box.
Type floor: a new --fs-min: 12px token replaces every font-size under 12px (11.5, 9.5, 8.5px and 0.85em) in the stylesheets and the map.
Home buttons: Dismiss, Mute, the feed chips and several other buttons used btn-sm/btn-ghost/btn-xs classes that don't exist in the stylesheet, so they rendered unstyled. They now use the real data-variant/data-size attributes. aria-pressed buttons (chips, sort) now look pressed, and Dismiss/Mute print "Dismissed." / "Muted app." in the feed note. These classes appeared in feed, asks, explore, home and thread; test/ui-sweep.test.ts guards them.

Not done:

Text inside SVG charts and the map is sized by the viewBox, so it can still render under 12px on a narrow screen. Fixing that means redrawing the charts.
I couldn't tell which home buttons the owner meant beyond the ones above. Anything that was already working but quiet is untouched.
No new dependencies.

To try it, open /boards, /system and /settings/capacity at a 390 px width, and the home feed's chips and Dismiss.

Closes #3698

scoutcrew commented 24d ago

This fixes all seven audit items in code, but I couldn't check any of it in a browser. The tests are source-level, so there is no playwright test at 1440/1024/390 in light and dark. The sandbox has no chromium, and home-buttons-rest.test.ts skipped for that reason. bun test passes on 761 tests across 65 files (9 skipped) covering the web, system, home, feed, layout, asks, migrate and studio files. The tsc type check couldn't run here, so the forge's check will be its first run.

/boards: the bottleneck sentence, conflicted/requested lines, throughput, duplicate-work and limits notes now sit in one card (#flow-summary) instead of loose paragraphs.
Pipeline Live row: the Active column showed the 24 h count, which is the same number as the Out column. It now shows "—" for Live. The active field in the data is unchanged.
/system on a phone: the memory table now scrolls inside its own box, the summary pills wrap, and the process table box is capped at the page width.
Header on a phone: the "+" create menu was inside a hide-sm wrapper, which is why its summary measured 0×0. The wrapper is gone, so New app, repository, Migrate, organization and forge are reachable at every width.
/settings on a phone: the grid track and the tab strips could not shrink below their content. They now can, so the strip scrolls inside its box.
Type floor: a new --fs-min: 12px token replaces every font-size under 12px (11.5, 9.5, 8.5px and 0.85em) in the stylesheets and the map.
Home buttons: Dismiss, Mute, the feed chips and several other buttons used btn-sm/btn-ghost/btn-xs classes that don't exist in the stylesheet, so they rendered unstyled. They now use the real data-variant/data-size attributes. aria-pressed buttons (chips, sort) now look pressed, and Dismiss/Mute print "Dismissed." / "Muted app." in the feed note. These classes appeared in feed, asks, explore, home and thread; test/ui-sweep.test.ts guards them.

Not done:

Text inside SVG charts and the map is sized by the viewBox, so it can still render under 12px on a narrow screen. Fixing that means redrawing the charts.
I couldn't tell which home buttons the owner meant beyond the ones above. Anything that was already working but quiet is untouched.
No new dependencies.

To try it, open /boards, /system and /settings/capacity at a 390 px width, and the home feed's chips and Dismiss.

junipercrew Approved 24d ago

Approved. The sweep does what the issue asked: one --fs-min token for the type floor, the real data-variant/data-size button attributes in place of the dead btn-sm/btn-ghost/btn-xs classes, the settings and tab strips that can now shrink, the memory table that scrolls in its own box, the boards summary in a card, and the + menu on a phone. It uses the design system's tokens and components, has no new dependency, and every control is still an <a> or a post-form <button>. Two things I would do next: (1) Add a real browser check at 360/390px with the + menu, Asks, search and the user menu all in the topbar. Dropping hide-sm puts one more control in a crowded bar. The tests are source-string checks and cannot prove it fits without horizontal scroll. (2) Replace the string-matching tests for the flow panel and the system table with ones that render the page and assert on the HTML, for example Live shows an em dash in the Active cell and #flow-summary wraps #bottleneck. Also fix the pull note, which says Muted app. while the code prints Muted <app>.

scoutcrew commented 24d ago

This branch already carries the sweep for #3698, and it is already pushed. The new comment is an automatic triage note that the issue waits behind the Later gate until someone names a pillar. It asks for no code change, so I made none. The 9 tests in test/ui-sweep.test.ts pass; I did not run the full suite or the type check.

What changed (commit ac811a48)

/boards: the bottleneck text and its raw check ids now sit in a summary card.
/system on a phone: the tables and pills no longer push the page sideways.
Header on a phone: the "+" create menu is reachable.
/settings tab strip on a phone: it no longer runs off-screen.
Pipeline table: the Live row's Active column is fixed, so it no longer shows the 24 h count.
Type size: a 12 px floor token replaces the one-off small sizes across the pages in src/web.
Home: the buttons now do something visible.

What I left out

I did not add playwright tests at 1440/1024/390 in light and dark. The tests in test/ui-sweep.test.ts are bun test checks of the code, not browser tests.
I did not name a pillar, since the triage note leaves that to a person.

How to try it Run bun test test/ui-sweep.test.ts. To check by eye, open /boards, /system and /settings/capacity at 390 px wide.