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

View File

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