From fac27dca45000db87f7656a727e31f3fd33dd404 Mon Sep 17 00:00:00 2001
From: hannahwestra25 <hannahwestra@microsoft.com>
Date: Thu, 13 Aug 2026 12:58:53 -0400
Subject: [PATCH] fix: meet 44px touch-target minimum for Initializers controls

Apply mobileTouchTargetHeight to the Refresh button, additional-initializer
Select, and Add initializer button so they reach the 44px coarse-pointer
minimum on touch devices.

Fixes #2350

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/Initializers/AdditionalInitializers.tsx  | 1 +
 frontend/src/components/Initializers/Initializers.styles.ts | 6 ++++++
 frontend/src/components/Initializers/Initializers.tsx       | 1 +
 3 files changed, 8 insertions(+)

diff --git a/frontend/src/components/Initializers/AdditionalInitializers.tsx b/frontend/src/components/Initializers/AdditionalInitializers.tsx
index 9ad4a8c06a..1bcfeaadbf 100644
--- a/frontend/src/components/Initializers/AdditionalInitializers.tsx
+++ b/frontend/src/components/Initializers/AdditionalInitializers.tsx
@@ -196,6 +196,7 @@ export default function AdditionalInitializers({
         <Button
           appearance="primary"
           icon={<AddRegular />}
+          className={pageStyles.touchTarget}
           onClick={() => setAddDialogOpen(true)}
           disabled={creating || !initializerName}
         >
diff --git a/frontend/src/components/Initializers/Initializers.styles.ts b/frontend/src/components/Initializers/Initializers.styles.ts
index 26489aa6d7..720a172a77 100644
--- a/frontend/src/components/Initializers/Initializers.styles.ts
+++ b/frontend/src/components/Initializers/Initializers.styles.ts
@@ -1,5 +1,7 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
 
+import { mobileTouchTargetHeight } from '@/styles/touchTargets'
+
 export const useInitializersStyles = makeStyles({
   root: {
     display: 'flex',
@@ -52,6 +54,10 @@ export const useInitializersStyles = makeStyles({
   },
   addInitializerSelect: {
     minWidth: '220px',
+    ...mobileTouchTargetHeight,
+  },
+  touchTarget: {
+    ...mobileTouchTargetHeight,
   },
   baselineList: {
     display: 'flex',
diff --git a/frontend/src/components/Initializers/Initializers.tsx b/frontend/src/components/Initializers/Initializers.tsx
index 684f085675..d7cb5fe81a 100644
--- a/frontend/src/components/Initializers/Initializers.tsx
+++ b/frontend/src/components/Initializers/Initializers.tsx
@@ -164,6 +164,7 @@ export default function Initializers() {
           <Button
             appearance="subtle"
             icon={<ArrowSyncRegular />}
+            className={styles.touchTarget}
             onClick={refreshSettings}
             disabled={loading}
           >