Fix mobile touch targets in Navigation + Footer (Phase 4 /adapt)
- Navigation: hamburger minWidth/minHeight 44px, drawer items minHeight 44px - Footer: contact links, link group links, legal links all minHeight 44px - Footer: tagline maxWidth responsive (100% on xs, 280 on md) - ProviderCard/VenueCard: no changes needed (card is the touch target, not meta items) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -104,7 +104,7 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
||||
{tagline && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ color: 'var(--fa-color-brand-300)', maxWidth: 280 }}
|
||||
sx={{ color: 'var(--fa-color-brand-300)', maxWidth: { xs: '100%', md: 280 } }}
|
||||
>
|
||||
{tagline}
|
||||
</Typography>
|
||||
@@ -120,7 +120,13 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
||||
</Typography>
|
||||
<Link
|
||||
href={`tel:${phone.replace(/\s/g, '')}`}
|
||||
sx={{ ...contactLinkSx, fontWeight: 600 }}
|
||||
sx={{
|
||||
...contactLinkSx,
|
||||
fontWeight: 600,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
minHeight: 44,
|
||||
}}
|
||||
>
|
||||
{phone}
|
||||
</Link>
|
||||
@@ -131,7 +137,15 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
||||
<Typography variant="overlineSm" sx={overlineSx}>
|
||||
Email
|
||||
</Typography>
|
||||
<Link href={`mailto:${email}`} sx={contactLinkSx}>
|
||||
<Link
|
||||
href={`mailto:${email}`}
|
||||
sx={{
|
||||
...contactLinkSx,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
minHeight: 44,
|
||||
}}
|
||||
>
|
||||
{email}
|
||||
</Link>
|
||||
</Box>
|
||||
@@ -181,6 +195,9 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
||||
color: 'var(--fa-color-brand-200)',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
minHeight: 44,
|
||||
'&:hover': { color: 'var(--fa-color-white)' },
|
||||
}}
|
||||
>
|
||||
@@ -228,6 +245,9 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
||||
color: 'var(--fa-color-brand-400)',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 500,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
minHeight: 44,
|
||||
'&:hover': { color: 'var(--fa-color-white)' },
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -110,6 +110,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
||||
onClick={handleDrawerToggle}
|
||||
size="medium"
|
||||
edge="start"
|
||||
sx={{ minWidth: 44, minHeight: 44 }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
@@ -224,6 +225,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
||||
sx={{
|
||||
py: 1.5,
|
||||
px: 3,
|
||||
minHeight: 44,
|
||||
'&:hover': {
|
||||
bgcolor: 'var(--fa-color-brand-100)',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user