fix(modal): give the close button a 44px touch target #172

Merged
tudor merged 1 commits from fix/modal-close-tap-target into main 2026-10-02 15:50:15 +00:00
Owner

Problem

The staging E2E gate has failed on the last three merges to main (99d62ef, fb3ef7d, 19c574e) with the same error, in "a phone filters through one sheet, and sees what it applied as chips":

expect(small).toEqual([])   // journeys.spec.ts:837
+ { "t": "Close modal", "w": 40, "h": 40 }

The modal's close button is 40px square: a 24px icon in 8px of padding. MOBILE.md's minimum touch target is 44px. The journey is right; the button was too small. The button has been this size all along, but this journey (added with the sheet in #168) is the first to measure it.

Change

Modal.module.css: .closeButton gets min-width and min-height of 2.75rem (44px). Every modal shares the button, so the compare page's school search gets the fix too.

Verification

  • Measured on staging at 390px with the rule injected into the open filter sheet: before, Close modal was 40×40, the only target under 44; after, it is 44×44, nothing in the sheet is under 44, and scrollWidth - innerWidth is 0.
  • Jest 569/569 (unaffected; jsdom does not lay out).
  • The failing journey itself is the test. It runs in the post-merge staging gate, so it turns green once this deploys.

🤖 Generated with Claude Code

## Problem The staging E2E gate has failed on the last three merges to `main` (99d62ef, fb3ef7d, 19c574e) with the same error, in **"a phone filters through one sheet, and sees what it applied as chips"**: ``` expect(small).toEqual([]) // journeys.spec.ts:837 + { "t": "Close modal", "w": 40, "h": 40 } ``` The modal's close button is 40px square: a 24px icon in 8px of padding. MOBILE.md's minimum touch target is 44px. The journey is right; the button was too small. The button has been this size all along, but this journey (added with the sheet in #168) is the first to measure it. ## Change `Modal.module.css`: `.closeButton` gets `min-width` and `min-height` of `2.75rem` (44px). Every modal shares the button, so the compare page's school search gets the fix too. ## Verification - Measured on staging at 390px with the rule injected into the open filter sheet: before, `Close modal` was 40×40, the only target under 44; after, it is 44×44, nothing in the sheet is under 44, and `scrollWidth - innerWidth` is 0. - Jest 569/569 (unaffected; jsdom does not lay out). - The failing journey itself is the test. It runs in the post-merge staging gate, so it turns green once this deploys. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
tudor added 1 commit 2026-10-02 15:40:46 +00:00
fix(modal): give the close button a 44px touch target
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m13s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 18s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m19s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 12s
27d83f9bd0
The close button was 40px square: a 24px icon in 8px of padding. MOBILE.md
sets 44px as the minimum, and the phone filter sheet journey, which
checks every target in the sheet, has failed on it in the staging E2E
gate since the sheet shipped. Measured on staging with the rule
injected: the button is 44x44, nothing in the sheet is under 44, and
the page does not overflow. Every Modal gets the same button, the
compare page's school search included.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

🤖 AI Code Review (Claude Code)

Adds min-width and min-height of 2.75rem (44px) to the modal close button so it meets the touch-target minimum. This is a small, CSS-only change with no functional, security, or deploy impact, and it looks healthy.

✅ No issues found.

## 🤖 AI Code Review (Claude Code) Adds min-width and min-height of 2.75rem (44px) to the modal close button so it meets the touch-target minimum. This is a small, CSS-only change with no functional, security, or deploy impact, and it looks healthy. ✅ No issues found.
tudor merged commit ccf0892a0e into main 2026-10-02 15:50:15 +00:00
Sign in to join this conversation.
No Reviewers
No labels
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: tudor/school_compare#172