jaredandClaude Opus 4.8
8a1168bc5f
Deep-audit follow-up. New shared MobileTouchTarget class (@media <=750px -> minWidth/minHeight 44px) applied via className to the primary interactive controls folds renders below 44px: - in-call control bar (7 buttons) + persistent call-status bar (4 buttons) - thread "N replies" chip - knock Approve/Deny buttons - server-ACL entry remove button folds size variants set only padding (no width/height/min-*), so the class raises the hit-area floor to 44px with the icon/label staying centered at its normal size; desktop is untouched (@media-gated). Verified by two review passes (no distortion, no layout overflow, counts exact). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
19 lines
635 B
TypeScript
19 lines
635 B
TypeScript
import { style } from '@vanilla-extract/css';
|
||
import { toRem } from 'folds';
|
||
|
||
/**
|
||
* A 44px minimum touch target on phones for otherwise-small interactive controls
|
||
* (folds `IconButton`/`Chip` at `size="300"`/`"400"` render ~24–40px, below the
|
||
* 44px guideline). Apply via `className`; the icon/label stays its normal visual
|
||
* size — only the hit area grows — and desktop is unchanged (the rule is gated to
|
||
* `@media (max-width: 750px)`, matching MOBILE_BREAKPOINT).
|
||
*/
|
||
export const MobileTouchTarget = style({
|
||
'@media': {
|
||
'(max-width: 750px)': {
|
||
minWidth: toRem(44),
|
||
minHeight: toRem(44),
|
||
},
|
||
},
|
||
});
|