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:
2026-03-31 15:43:50 +11:00
parent cbd33daf3a
commit 23bcf31c87
2 changed files with 25 additions and 3 deletions

View File

@@ -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)' },
}} }}
> >

View File

@@ -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)',
}, },