From 23bcf31c87c299e13184419149d805c4d61ba24f Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Tue, 31 Mar 2026 15:43:50 +1100
Subject: [PATCH] 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>
---
 src/components/organisms/Footer/Footer.tsx    | 26 ++++++++++++++++---
 .../organisms/Navigation/Navigation.tsx       |  2 ++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/Footer/Footer.tsx b/src/components/organisms/Footer/Footer.tsx
index 47cb697..8bfca11 100644
--- a/src/components/organisms/Footer/Footer.tsx
+++ b/src/components/organisms/Footer/Footer.tsx
@@ -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)' },
                     }}
                   >
diff --git a/src/components/organisms/Navigation/Navigation.tsx b/src/components/organisms/Navigation/Navigation.tsx
index 0f6c50e..ab4aa95 100644
--- a/src/components/organisms/Navigation/Navigation.tsx
+++ b/src/components/organisms/Navigation/Navigation.tsx
@@ -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)',
                     },