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 && (
|
{tagline && (
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
sx={{ color: 'var(--fa-color-brand-300)', maxWidth: 280 }}
|
sx={{ color: 'var(--fa-color-brand-300)', maxWidth: { xs: '100%', md: 280 } }}
|
||||||
>
|
>
|
||||||
{tagline}
|
{tagline}
|
||||||
</Typography>
|
</Typography>
|
||||||
@@ -120,7 +120,13 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
|||||||
</Typography>
|
</Typography>
|
||||||
<Link
|
<Link
|
||||||
href={`tel:${phone.replace(/\s/g, '')}`}
|
href={`tel:${phone.replace(/\s/g, '')}`}
|
||||||
sx={{ ...contactLinkSx, fontWeight: 600 }}
|
sx={{
|
||||||
|
...contactLinkSx,
|
||||||
|
fontWeight: 600,
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: 44,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{phone}
|
{phone}
|
||||||
</Link>
|
</Link>
|
||||||
@@ -131,7 +137,15 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
|||||||
<Typography variant="overlineSm" sx={overlineSx}>
|
<Typography variant="overlineSm" sx={overlineSx}>
|
||||||
Email
|
Email
|
||||||
</Typography>
|
</Typography>
|
||||||
<Link href={`mailto:${email}`} sx={contactLinkSx}>
|
<Link
|
||||||
|
href={`mailto:${email}`}
|
||||||
|
sx={{
|
||||||
|
...contactLinkSx,
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: 44,
|
||||||
|
}}
|
||||||
|
>
|
||||||
{email}
|
{email}
|
||||||
</Link>
|
</Link>
|
||||||
</Box>
|
</Box>
|
||||||
@@ -181,6 +195,9 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
|||||||
color: 'var(--fa-color-brand-200)',
|
color: 'var(--fa-color-brand-200)',
|
||||||
fontSize: '0.875rem',
|
fontSize: '0.875rem',
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: 44,
|
||||||
'&:hover': { color: 'var(--fa-color-white)' },
|
'&:hover': { color: 'var(--fa-color-white)' },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -228,6 +245,9 @@ export const Footer = React.forwardRef<HTMLDivElement, FooterProps>(
|
|||||||
color: 'var(--fa-color-brand-400)',
|
color: 'var(--fa-color-brand-400)',
|
||||||
fontSize: '0.75rem',
|
fontSize: '0.75rem',
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: 44,
|
||||||
'&:hover': { color: 'var(--fa-color-white)' },
|
'&:hover': { color: 'var(--fa-color-white)' },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -110,6 +110,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
|||||||
onClick={handleDrawerToggle}
|
onClick={handleDrawerToggle}
|
||||||
size="medium"
|
size="medium"
|
||||||
edge="start"
|
edge="start"
|
||||||
|
sx={{ minWidth: 44, minHeight: 44 }}
|
||||||
>
|
>
|
||||||
<MenuIcon />
|
<MenuIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
@@ -224,6 +225,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
|||||||
sx={{
|
sx={{
|
||||||
py: 1.5,
|
py: 1.5,
|
||||||
px: 3,
|
px: 3,
|
||||||
|
minHeight: 44,
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
bgcolor: 'var(--fa-color-brand-100)',
|
bgcolor: 'var(--fa-color-brand-100)',
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user