From c79b610145d1c37a850339b1b6b43c2c519044a3 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Wed, 11 Feb 2026 11:33:57 -0600
Subject: [PATCH] feat: enforce 44px minimum touch targets for receipt OCR
 components (refs #140)

Adds minHeight/minWidth: 44 to ReceiptCameraButton, ReceiptOcrReviewModal
action buttons, and UpgradeRequiredDialog buttons and close icon to meet
mobile accessibility requirements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../features/fuel-logs/components/ReceiptCameraButton.tsx   | 3 +++
 .../features/fuel-logs/components/ReceiptOcrReviewModal.tsx | 6 +++---
 .../src/shared-minimal/components/UpgradeRequiredDialog.tsx | 6 ++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/fuel-logs/components/ReceiptCameraButton.tsx b/frontend/src/features/fuel-logs/components/ReceiptCameraButton.tsx
index 3e7839f..19ed81b 100644
--- a/frontend/src/features/fuel-logs/components/ReceiptCameraButton.tsx
+++ b/frontend/src/features/fuel-logs/components/ReceiptCameraButton.tsx
@@ -48,6 +48,8 @@ export const ReceiptCameraButton: React.FC<ReceiptCameraButtonProps> = ({
             size={size}
             aria-label={locked ? 'Scan receipt (Pro feature)' : 'Scan receipt with camera'}
             sx={{
+              minWidth: 44,
+              minHeight: 44,
               backgroundColor: locked ? 'action.disabledBackground' : 'primary.light',
               color: locked ? 'text.secondary' : 'primary.contrastText',
               '&:hover': {
@@ -77,6 +79,7 @@ export const ReceiptCameraButton: React.FC<ReceiptCameraButtonProps> = ({
           startIcon={locked ? <LockOutlinedIcon /> : <ReceiptIcon />}
           endIcon={locked ? undefined : <CameraAltIcon />}
           sx={{
+            minHeight: 44,
             borderStyle: 'dashed',
             '&:hover': {
               borderStyle: 'solid',
diff --git a/frontend/src/features/fuel-logs/components/ReceiptOcrReviewModal.tsx b/frontend/src/features/fuel-logs/components/ReceiptOcrReviewModal.tsx
index c8ae025..cf9eb4f 100644
--- a/frontend/src/features/fuel-logs/components/ReceiptOcrReviewModal.tsx
+++ b/frontend/src/features/fuel-logs/components/ReceiptOcrReviewModal.tsx
@@ -430,14 +430,14 @@ export const ReceiptOcrReviewModal: React.FC<ReceiptOcrReviewModalProps> = ({
         <Button
           onClick={onRetake}
           startIcon={<CameraAltIcon />}
-          sx={{ order: isMobile ? 2 : 1 }}
+          sx={{ order: isMobile ? 2 : 1, minHeight: 44 }}
         >
           Retake Photo
         </Button>
         <Box sx={{ flex: 1, display: isMobile ? 'none' : 'block' }} />
         <Button
           onClick={onCancel}
-          sx={{ order: isMobile ? 3 : 2 }}
+          sx={{ order: isMobile ? 3 : 2, minHeight: 44 }}
         >
           Cancel
         </Button>
@@ -445,7 +445,7 @@ export const ReceiptOcrReviewModal: React.FC<ReceiptOcrReviewModalProps> = ({
           variant="contained"
           onClick={onAccept}
           startIcon={<CheckIcon />}
-          sx={{ order: isMobile ? 1 : 3, width: isMobile ? '100%' : 'auto' }}
+          sx={{ order: isMobile ? 1 : 3, width: isMobile ? '100%' : 'auto', minHeight: 44 }}
         >
           Accept
         </Button>
diff --git a/frontend/src/shared-minimal/components/UpgradeRequiredDialog.tsx b/frontend/src/shared-minimal/components/UpgradeRequiredDialog.tsx
index 35f1016..e47a6b4 100644
--- a/frontend/src/shared-minimal/components/UpgradeRequiredDialog.tsx
+++ b/frontend/src/shared-minimal/components/UpgradeRequiredDialog.tsx
@@ -79,6 +79,8 @@ export const UpgradeRequiredDialog: React.FC<UpgradeRequiredDialogProps> = ({
             position: 'absolute',
             right: 8,
             top: 8,
+            minWidth: 44,
+            minHeight: 44,
             color: (theme) => theme.palette.grey[500],
           }}
         >
@@ -157,7 +159,7 @@ export const UpgradeRequiredDialog: React.FC<UpgradeRequiredDialogProps> = ({
           onClick={onClose}
           variant="outlined"
           fullWidth={isSmall}
-          sx={{ order: isSmall ? 2 : 1 }}
+          sx={{ order: isSmall ? 2 : 1, minHeight: 44 }}
         >
           Maybe Later
         </Button>
@@ -166,7 +168,7 @@ export const UpgradeRequiredDialog: React.FC<UpgradeRequiredDialogProps> = ({
           variant="contained"
           color="primary"
           fullWidth={isSmall}
-          sx={{ order: isSmall ? 1 : 2 }}
+          sx={{ order: isSmall ? 1 : 2, minHeight: 44 }}
         >
           Upgrade (Coming Soon)
         </Button>