Raise MeatSpace log-row icon buttons to the 44px tap-target floor - #5901
Merged
Conversation
…floor (#5703) The health-logging tabs are the app's most phone-centric surface — a drink or a nicotine entry gets logged one-handed — yet their inline row controls shipped as a bare `p-1`/`p-1.5` around a 12-14px icon: a 22-26px hit area, half the floor the other 163 files in client/src enforce. Save and Cancel sit adjacent in the edit rows, so a mis-tap commits or discards the wrong edit. Every icon-only button in `components/meatspace/` with that padding now carries `min-h-[44px] min-w-[44px] inline-flex items-center justify-center`, and the action rows that hold two of them widen from `gap-1` to `gap-2` so the targets don't butt up against each other. Icon sizes are untouched: growing the glyph would change the log tables' density, growing the invisible box does not. Also fixes the same shape in the seven single controls the audit named outside MeatSpace (LocalLlmTab, wiki GraphTab/LogTab, sharing ConflictsTab, media PromptFromMedia, Loops, Review) plus Review's inline Save, which sits next to the named Cancel and would otherwise have been left mismatched. Guarded by a new rule in `a11yConventions.test.js`, which already owned the 44px close-button scan and the icon-only-button matcher: `isIconOnlyButton` is split out of `isUnnamedIconOnlyButton` so both rules read one definition of the shape. The new rule is scoped to `components/meatspace/` and to the `p-0.5`/`p-1`/`p-1.5` padding shape, and probes itself against a synthetic offender first so a green run means "none left", not "matcher went blind".
…#5703) Review pass flagged the `startsWith('src/components/meatspace/')` filter as a silent-zero-files hazard: if trackedJsxFiles() ever changes its path shape the rule would pass over nothing. Count the selection before scanning it.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<button>inclient/src/components/meatspace/that was styledp-0.5/p-1/p-1.5from a 22-26px hit area to the 44px floor the rest of the app enforces, by addingmin-h-[44px] min-w-[44px] inline-flex items-center justify-center. Icon sizes are unchanged — growing the glyph would change the log tables' density; growing the invisible box does not.gap-1togap-2so adjacent Save/Cancel no longer butt up against each other (nicotine + alcohol edit rows, the eye-exam row, the memory speed-run row).settings/LocalLlmTab.jsx,wiki/tabs/GraphTab.jsx,wiki/tabs/LogTab.jsx,sharing/ConflictsTab.jsx,media/PromptFromMedia.jsx,pages/Loops.jsx,pages/Review.jsx.<button[^>]*stops at the>inside an arrow function — the same blind spot hid four more controls inNicotineTab.jsx, which are fixed here too. Re-running the grep without that prefix is what produced the final offender list.client/src/a11yConventions.test.js, which already owned the 44px close-button scan.isIconOnlyButtonis split out ofisUnnamedIconOnlyButtonso the naming rule and the touch-target rule read one definition of the shape (an aria-label makes a 22px button announceable, not tappable).Deliberately out of scope
The
LocalLlmTab.jsxedit is the two tap-target attributes on one line, so it stays trivially rebaseable under the pending component split (#5720). The guard is scoped tocomponents/meatspace/and to the tight-padding shape — icon buttons that reach 44px through generous padding, or that carry no padding class at all, are a different question and a handful survive in desktop-first views; widening the rule here would turn one regression guard into a tree-wide sweep.Test plan
cd client && npx vitest run src/a11yConventions.test.js— 50 passed, including the new rule. It probes itself against a synthetic offender before scanning, and asserts the file filter actually selected the tree, so a green run means "none left" rather than "matcher went blind" or "scanned zero files".cd client && npx vitest run src/components/meatspace src/components/settings/LocalLlmTab src/components/wiki/tabs src/components/sharing/ConflictsTab src/components/media/PromptFromMedia src/pages/Loops src/pages/Review— 551 passed.PostDrillConfig.test.jsxhit five 5s hook timeouts in the batch run; it passes 41/41 in isolation and the file is untouched by this change (this worktree lives underdata/, which the suite walks).cd client && npm run lint— clean.<button[^>]*prefix) leaves only two<div>padding wrappers incalendar/LifeGrid.jsx, which are not controls.Closes #5703