fix(ui): enforce 44px hit areas on icon-only controls, fix AA targets - #189
Conversation
…rgets C-table (18 icon-only controls → 44px hit area): - 13 selectors: ::after pseudo-element with absolute 44px overlay - asset-element-toggle: actual size 36→44 - agent-result-thumb--compact: actual size 30→44 - canvas-toolbar__bg input[type=color]: actual size 22→44 - element-mention-chip: min-height 44px + remove button width 44px (overflow:hidden prevents ::after approach) - right-panel-toggle: ::after overlay D-table (2 text controls → 24px AA): - card-news-placement-chip/render-mode: min-height 22→24px - gallery-card-news-actions: min-height 22→24px E-table exemption: agent-session-row actions (28x24) documented as 24px AA pass with 44px exempted due to density conflict. 17 files changed, no behavior changes.
20 assertions: 14 ::after hit areas verified, 3 actual-size targets, element-mention-chip min-height+width, card-news 24px AA, session action 24px minimum.
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2d47df3d3f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| /* wp6: 44px hit area */ | ||
| .composer__prompt-chip-remove { position: relative; } | ||
| .composer__prompt-chip-remove::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } |
There was a problem hiding this comment.
In each prompt chip, the 22px reorder and remove buttons are separated by only 2px, but this pseudo-element extends 11px beyond the remove button on both sides. Because the remove button is the later sibling, its pseudo-element is painted over roughly 9px of the preceding down-arrow button, so a touch on the visible reorder control can call removeInsertedPrompt and delete the prompt instead. Increase/space the real controls or otherwise ensure their expanded hit regions do not overlap.
Useful? React with 👍 / 👎.
| } | ||
|
|
||
| /* wp6: 44px hit area */ | ||
| .right-panel-toggle { position: relative; } |
There was a problem hiding this comment.
On desktop, this later rule overrides the toggle's original position: absolute declaration. The toggle consequently becomes the first in-flow flex child of .right-panel, reserving 40px above .right-panel-body and reducing the body's available height even though top: 50% visually offsets the button toward the middle. Preserve absolute positioning while establishing the pseudo-element's containing block.
Useful? React with 👍 / 👎.
|
|
||
| /* wp6: 44px hit area */ | ||
| .canvas-style-swatch { position: relative; } | ||
| .canvas-style-swatch::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } |
There was a problem hiding this comment.
The color swatches are 22px wide with a 6px gap, while every new pseudo-element is 44px wide, so adjacent hit regions overlap by 16px. Later swatches paint over part of earlier ones; tapping near the right edge of a visible swatch can therefore select the next color instead. The swatches need sufficient spacing, real target dimensions, or non-overlapping expansion.
Useful? React with 👍 / 👎.
1 participant
Summary
18 icon-only controls now have 44px effective hit areas. 2 text controls
raised to 24px AA minimum.
C-table: 18 icon-only controls (44px)
::afterpseudo-element overlayagent-result-thumb-compact 30->44, color input 22->44)
remove button width 44px due to overflow:hidden clipping)
D-table: 2 text controls (24px AA)
E-table: 1 exemption
single-column grid density conflict
Tests