fix(a11y): let the tier button group wrap when the press adds auto - #161
Conversation
Pressing a tier mounts the `auto` button beside the three tier buttons, and `.btn-group` was `inline-flex` with no `flex-wrap`, so it could not give the width back. Measured at 320px on a seeded roster: the group goes 251.3px -> 282.9px inside a 262px drawer panel. So the press that pins an account's tier is the same press that pushes `auto` — the control that UNDOES the pin — past the edge of the panel it lives in, leaving an admin who pinned a tier by accident to scroll the accounts table sideways to reach the undo. Row-gap is 4px rather than the 2px column gap: two wrapped rows meet along a whole button width instead of along one 28px edge, where 2px reads as the seam the existing gap exists to prevent. The spec bounds the group by the drawer's control column as it stood before the press. The panel itself is the wrong bound — the note field's intrinsic minimum already puts that column at 264.5px against a 262px panel with nothing pressed — and the column measured after the press is circular, since an unwrapped group stretches its own siblings to match it.
|
This is the closing report for the unattended design sweep run of 2026-08-06 ( The PRs, and the order they mergeNo order is required. Every PR in this run is based on
#150, #152, #153 and #156 merged during the same window and are not this run's work — different branches, unrelated changes. What stopped the runConvergence, not the round cap. The highest-ranked remaining finding cannot produce a concrete sentence naming who is harmed and what it costs them — the stopping rule's first condition. What is left is three P3s on Round 9 published a wrong diagnosis and it was correctedThe most important thing in this report. Round 9 attributed a drawer layout defect to Two controlled experiments falsified it: hiding the notice after the press changes nothing, and pressing a tier on an already-locked row (where the notice is the only thing that changes) leaves the geometry byte-identical. The real causes were the tier badge's lock glyph widening a table column, and the Both artifacts were corrected in place — commit What was skipped, and whyAbove the loop's ceiling — these need a human:
Vetoed by the direction ledger:
On the settled list, deliberately not re-opened:
Below the floor, or measured but not worth a round:
What the automated reviewer said, and why it mostly said nothingCodeRabbit reviewed three of the nine PRs:
#151, #154, #155, #158, #159 and #160 have zero reviews. The cause is rate limiting, not configuration. So six of the nine PRs are unreviewed by anything but this run's own gates, including #160, which is still open. That is the single largest caveat on the whole run, and it is worth more than the sum of the skips above: a silent reviewer reads exactly like a reviewer that found nothing. GatesEvery round ran
Also not run on any branch: |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe change makes ChangesResponsive tier controls
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Comment |
|
Tip For best results, initiate chat on the files or code changes.
The sweep stopped on convergence, not on the round cap. The open PRs I will not re-raise the retired Round 9 The rate-limit caveat is also recorded. Seven PRs in this run did not receive an automated review. ✏️ Learnings added
You are interacting with an AI system. |
![coderabbitai[bot]](https://avatars.github.com/in/347564?s=60&v=4){kind=small}
|
Tip For best results, initiate chat on the files or code changes.
PRs Round 9’s The missing reviews on The initial 🐇 ✏️ Learnings added
You are interacting with an AI system. |
|
Tip For best results, initiate chat on the files or code changes.
The sweep stopped because the remaining findings did not meet the harm-and-cost threshold. It did not stop because of the round limit. I will treat the four For 🐇 ✏️ Learnings added
You are interacting with an AI system. |
1 participant
Round ten of an unattended design sweep, and the last one it ran. One sentence: the press that pins an account's tier no longer pushes the control that undoes the pin off the edge of the drawer.
Based on
main, independent of #160, the only other PR from this run still open. Merge in either order — #160 is copy and aclassName, this isglobals.cssand one spec, and they do not touch the same lines.The finding
.btn-group(globals.css:2094) wasdisplay: inline-flex; gap: 2pxwith noflex-wrap, so it could not give width back when its contents grew. It has exactly one call site:admin/accounts/page.tsx:902, the tier control group inside a roster row's drawer.Pressing a tier mounts the
autobutton beside the three tier buttons (page.tsx:968, underr.tierLocked). Measured at 320px on a seeded roster,Member 00's drawer:.btn-groupwidth.btn-groupright edge.drawerpanel right edgeSo 20.92px of the
autobutton sat outside the panel.The cost it removes. An admin on a phone who pinned a tier by accident has to scroll the accounts table sideways to reach the undo. Accidental is the realistic case, not a contrived one: on an auto-tiered account
r.tierLockedisfalse, so the tier button carryingaria-pressed="true"is fully live (page.tsx:959disables it only once locked) whileglobals.css:2002-2020paints it with--hull-hiand a leading▪— the same treatment the filter chips above use to mean you are already here, this does nothing. Pressing it takes that account out of the membership sync's reach for good.This is the other half of #160, which ships the sentence telling the admin to "Press auto to unpin." Naming a control the layout then pushes off-panel is worse than not naming it.
The fix
Post-fix the group is 264.53 × 60px — two rows of 28px with 4px between them — and ends flush with the drawer's control column instead of 20.9px past it.
Row-gap is 4px rather than the 2px column gap, deliberately. The comment at
globals.css:2099-2102says the 2px exists so adjacent tier buttons are "not a single smear". That reasoning does not transfer across the axis: buttons in a row share one 28px edge, but two wrapped rows meet along a whole button width — 73.17px forTesters, similar for the others — where the same 2px is a longer and more visible seam, not a smaller one. The cost of 4px is one gap in a drawer that already grows to fit.The spec
One test,
e2e/admin.spec.ts:1078, in the narrow-screen operability block. Verified to fail with only the CSS reverted:The bound is the control column measured before the press, not the drawer panel and not the column measured after. Both alternatives were ruled out by measurement rather than by argument:
.drawer__controlsis 264.53px against a 262px panel with nothing pressed at all. Probing each child in turn, hiding the Note group drops the column to exactly 262 and hiding anything else leaves it at 264.53 — so the note field's own intrinsic minimum already overflows the panel by 2.53px whenever the drawer is open. A panel-relative assertion would be pinning that, not this.groupRight <= drawer__controls.rightand passed with the fix reverted, 311.92 vs 311.92 — the tier group is a stretch item in that column, so an unwrapped group widens.note-formand every sibling to match itself. That draft was discarded, and it is recorded in the spec's docblock so the next person does not rewrite it.The test guards on the
autobutton being visible before measuring, so a press that silently fails to land cannot make it vacuous.The existing 1440px alignment spec (
admin.spec.ts:939, which takes.btn-group's bounding box) still passes; at 1440 the group is nowhere near its wrap point.What this round did not do
.drawer__controls. Same missingflex-wrapis the suspected cause and this fix plausibly relieves it, but it was not measured this round, so no claim is made.Gates
Run on this branch's tip in the worktree by the run lead, not quoted from the implementing agent:
npx tsc --noEmit— exit 0, no outputnpx eslint .— exit 0, no outputnpx prettier --check .— "All matched files use Prettier code style!"npm test— 77 files, 1145 tests passednpx playwright test— 238 passed, 0 failed. 237 baseline plus exactly the one spec added.tsconfig.jsonandAGENTS.mdwere not rewritten this round.Not run on this branch:
docker build .andscripts/check-node-version.sh— environment-bound and slow. CI runs both on this PR. Treat them as unchecked until it does.Summary by CodeRabbit
Bug Fixes
Tests