Skip to content

Sweep the remaining sub-44px icon buttons outside MeatSpace and widen the tap-target guard to the whole client tree #5904

Description

@atomantic

Deferred from #5703 / #5901, which fixed the MeatSpace health-logging tree and seven named single controls but deliberately left the rest of the tree alone.

Problem — a tree-wide scan of git-tracked client/src/**/*.jsx still finds ~250 static className values carrying p-0.5/p-1/p-1.5 with no min-h-[44px]. A good share of those are icon-only <button>s: a 12-16px glyph in 4-6px of padding is a 20-28px tap target, well under the 44px floor PageSkeleton.jsx:32 documents and 163 other files already honour. Known clusters:

  • pages/Review.jsx — the review-card action rows (:452, :660, :667, :818, :826, :833, :840).
  • pages/Loops.jsx — the loop-card run/stop/resume/delete row (:254, :257, :262, :266).
  • components/wiki/tabs/GraphTab.jsx:213,220 and components/settings/LocalLlmTab.jsx:1218 — siblings of controls already fixed in Raise MeatSpace log-row icon buttons to the 44px tap-target floor #5901.

Scanclient/src/a11yConventions.test.js already carries the matcher. Its rule "meets the 44px touch-target minimum on the MeatSpace log-row icon buttons (#5703)" is scoped to src/components/meatspace/ and to the tight-padding shape; dropping the path filter reports the full offender list, and isIconOnlyButton there is the shared definition of "icon-only".

Plan

  1. Sweep the offenders the way Raise MeatSpace log-row icon buttons to the 44px tap-target floor #5901 did: add min-h-[44px] min-w-[44px] inline-flex items-center justify-center, widen gap-1 to gap-2 where two of them sit adjacent, and leave every icon size= untouched — glyph size is what sets each row's density.
  2. Watch the dense card/table rows: a 44px min-height grows rows that were shorter, so eyeball the affected views rather than trusting the grep alone.
  3. Widen the guard's scope from src/components/meatspace/ to the whole tree in the same PR, so the sweep can't silently regress. Keep the padding-shape filter and the self-probe.

Out of scope — buttons carrying text labels (padding plus text already clears 44px), the OpenWorld HUD (.openworld-hud-action in index.css), and icon buttons with no padding class at all or with roomy padding (p-2+): a different judgement call per site, and folding them in would make the sweep unreviewable.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

effort:mediumEffort: mediumplanTracked by /do:replanuxProposed from a UX/design audit

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions