From 27d83f9bd0b8a0333216151b8262c4fe8f52ebd6 Mon Sep 17 00:00:00 2001 From: Tudor Date: Fri, 2 Oct 2026 16:40:45 +0100 Subject: [PATCH] fix(modal): give the close button a 44px touch target 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 --- nextjs-app/components/Modal.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/nextjs-app/components/Modal.module.css b/nextjs-app/components/Modal.module.css index d335a75..36efdda 100644 --- a/nextjs-app/components/Modal.module.css +++ b/nextjs-app/components/Modal.module.css @@ -79,7 +79,11 @@ font-family: var(--font-display); } +/* 44px, the MOBILE.md touch-target minimum: the 24px icon and its padding + came to 40, and the phone filter sheet journey caught it. */ .closeButton { + min-width: 2.75rem; + min-height: 2.75rem; padding: 0.5rem; background: transparent; border: none;