From 36fdbdd399f858daa8f33e45d1a056ffebe4f523 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Sat, 18 Jul 2026 22:41:36 -0400 Subject: [PATCH] fix(mobile): 44px touch targets for room rows + space rail (M6) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mobile-audit batch 6. Bump the primary always-visible tap targets to a 44px touch area on phones, via mobile-gated CSS only (desktop/tablet >750px keep the denser sizing). - NavItemBase (room/nav list row): minHeight 36 -> 44 at <=750px. - SidebarItem (space-rail button): minWidth/minHeight -> 44 at <=750px (was 42). The room lists are virtualized with ref=virtualizer.measureElement on every row, so rows are measured to their actual height — the taller mobile rows can't overlap/clip. Verified desktop-unchanged and virtualizer-safe by two review passes. (A blanket app-wide size=300 button sweep was intentionally NOT done: most such buttons are hover-gated and never appear on mobile; the primary tap targets above are the high-value fixes.) Co-Authored-By: Claude Opus 4.8 --- src/app/components/nav/styles.css.ts | 5 +++++ src/app/components/sidebar/Sidebar.css.ts | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/src/app/components/nav/styles.css.ts b/src/app/components/nav/styles.css.ts index 48b2a4d34..0accbd7af 100644 --- a/src/app/components/nav/styles.css.ts +++ b/src/app/components/nav/styles.css.ts @@ -53,6 +53,11 @@ const NavItemBase = style({ color: OnContainer, outline: 'none', minHeight: toRem(36), + '@media': { + // The room/nav row is the app's primary tap target; give it a 44px touch + // area on phones (desktop stays the denser 36px). + '(max-width: 750px)': { minHeight: toRem(44) }, + }, selectors: { '&:hover, &:focus-visible': { diff --git a/src/app/components/sidebar/Sidebar.css.ts b/src/app/components/sidebar/Sidebar.css.ts index a877e2bf1..94df7617b 100644 --- a/src/app/components/sidebar/Sidebar.css.ts +++ b/src/app/components/sidebar/Sidebar.css.ts @@ -81,6 +81,10 @@ export const SidebarItem = recipe({ justifyContent: 'center', position: 'relative', transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)', + '@media': { + // Space-rail buttons to a 44px touch target on phones (2px larger). + '(max-width: 750px)': { minWidth: toRem(44), minHeight: toRem(44) }, + }, selectors: { '&:hover': {