From d9393a2148b48ab627547c2f488796fa61676203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 19 Jun 2026 21:27:05 +0200
Subject: [PATCH] fix(settings): raise primary controls to the 44px touch floor

Apply the canonical min-h-11 sm:min-h-9 (and min-w-11 for icon-only
controls) to the primary Settings controls that sat at 32-40 px on
phones: the AI fallback-chain reorder/remove/save/add icons, provider
form save/test/connect actions, coach-memory forget, avatar replace and
remove, section save/cancel/reset CTAs, the export and import action
rows, the About external links, and the thresholds editor row. Collapse
the injection-sites checkbox grid to one column on phones and stack the
password-change grid below lg.
---
 src/components/settings/about-me-section.tsx  |  2 ++
 src/components/settings/about-section.tsx     | 21 ++++++++++++++++---
 src/components/settings/account-section.tsx   |  5 +++--
 src/components/settings/advanced-section.tsx  |  6 +++---
 .../settings/ai/anthropic-provider-form.tsx   |  1 +
 .../settings/ai/codex-provider-form.tsx       |  4 ++--
 .../settings/ai/fallback-chain-card.tsx       | 12 +++++++++--
 .../settings/ai/local-provider-form.tsx       |  1 +
 .../settings/ai/openai-provider-form.tsx      |  1 +
 .../settings/ai/runtime-actions-row.tsx       |  2 ++
 .../settings/coach-memory-section.tsx         |  2 ++
 .../settings/coach-prefs-section.tsx          |  1 +
 .../settings/cycle-tracking-card.tsx          |  7 ++++++-
 .../settings/dashboard-layout-section.tsx     |  4 +++-
 src/components/settings/export-section.tsx    |  4 ++++
 src/components/settings/import-panel.tsx      |  8 +++++++
 .../settings/injection-sites-card.tsx         |  2 +-
 .../settings/insights-pill-order-section.tsx  |  2 +-
 .../settings/thresholds-editor-section.tsx    |  2 ++
 19 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/src/components/settings/about-me-section.tsx b/src/components/settings/about-me-section.tsx
index b92cace67..6683d45a4 100644
--- a/src/components/settings/about-me-section.tsx
+++ b/src/components/settings/about-me-section.tsx
@@ -274,6 +274,7 @@ export function AboutMeSection({
               type="button"
               variant="outline"
               size="sm"
+              className="min-h-11 sm:min-h-9"
               data-testid="settings-about-me-clear"
               disabled={!isAuthenticated || save.isPending}
               onClick={() =>
@@ -292,6 +293,7 @@ export function AboutMeSection({
           <Button
             type="button"
             size="sm"
+            className="min-h-11 sm:min-h-9"
             data-testid="settings-about-me-save"
             disabled={!isAuthenticated || save.isPending || !dirty}
             onClick={() => save.mutate(value)}
diff --git a/src/components/settings/about-section.tsx b/src/components/settings/about-section.tsx
index 4f746ea83..de0bae81d 100644
--- a/src/components/settings/about-section.tsx
+++ b/src/components/settings/about-section.tsx
@@ -269,7 +269,12 @@ export function AboutSection() {
             className="mb-4"
           />
           <div className="flex flex-col gap-2 pl-7 sm:flex-row sm:flex-wrap">
-            <Button asChild variant="outline" size="sm">
+            <Button
+              asChild
+              variant="outline"
+              size="sm"
+              className="min-h-11 sm:min-h-9"
+            >
               <a
                 href={version.repository}
                 target="_blank"
@@ -280,7 +285,12 @@ export function AboutSection() {
                 <ExternalLink className="h-3.5 w-3.5" />
               </a>
             </Button>
-            <Button asChild variant="outline" size="sm">
+            <Button
+              asChild
+              variant="outline"
+              size="sm"
+              className="min-h-11 sm:min-h-9"
+            >
               <a
                 href={version.changelog}
                 target="_blank"
@@ -291,7 +301,12 @@ export function AboutSection() {
                 <ExternalLink className="h-3.5 w-3.5" />
               </a>
             </Button>
-            <Button asChild variant="outline" size="sm">
+            <Button
+              asChild
+              variant="outline"
+              size="sm"
+              className="min-h-11 sm:min-h-9"
+            >
               <a href={version.docs} target="_blank" rel="noopener noreferrer">
                 <BookOpen className="h-4 w-4" />
                 {t("settings.about.docs")}
diff --git a/src/components/settings/account-section.tsx b/src/components/settings/account-section.tsx
index 393370666..ee8a2a95e 100644
--- a/src/components/settings/account-section.tsx
+++ b/src/components/settings/account-section.tsx
@@ -694,7 +694,7 @@ export function AccountSection() {
           </DialogHeader>
 
           <form onSubmit={handleChangePassword} className="space-y-4">
-            <div className="grid gap-3 sm:grid-cols-3">
+            <div className="grid gap-3 lg:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="current-password">
                   {t("settings.currentPassword")}
@@ -1123,6 +1123,7 @@ function AvatarSection() {
           />
           <Button
             variant="outline"
+            className="min-h-11 sm:min-h-9"
             disabled={busy}
             onClick={() => fileInputRef.current?.click()}
           >
@@ -1138,7 +1139,7 @@ function AvatarSection() {
           {avatarUrl && (
             <Button
               variant="ghost"
-              className="text-destructive"
+              className="text-destructive min-h-11 sm:min-h-9"
               disabled={busy}
               onClick={() => {
                 setMsg(null);
diff --git a/src/components/settings/advanced-section.tsx b/src/components/settings/advanced-section.tsx
index 52cb08886..9005f5ef3 100644
--- a/src/components/settings/advanced-section.tsx
+++ b/src/components/settings/advanced-section.tsx
@@ -164,7 +164,7 @@ function ResearchModeCard() {
           <Button
             size="sm"
             variant="outline"
-            className="mt-2"
+            className="mt-2 min-h-11 sm:min-h-9"
             onClick={() => setDialogOpen(true)}
             data-slot="settings-research-mode-reprompt-cta"
           >
@@ -286,7 +286,7 @@ function DataResetCard() {
               variant="destructive"
               size="sm"
               disabled={deleting}
-              className="w-full shrink-0 sm:w-auto"
+              className="min-h-11 w-full shrink-0 sm:min-h-9 sm:w-auto"
             >
               {deleting ? (
                 <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
@@ -428,7 +428,7 @@ function AccountDeleteCard() {
               variant="destructive"
               size="sm"
               disabled={deleting}
-              className="w-full shrink-0 sm:w-auto"
+              className="min-h-11 w-full shrink-0 sm:min-h-9 sm:w-auto"
               data-slot="settings-account-delete-trigger"
             >
               {deleting ? (
diff --git a/src/components/settings/ai/anthropic-provider-form.tsx b/src/components/settings/ai/anthropic-provider-form.tsx
index c7e8b810f..6f9c395f3 100644
--- a/src/components/settings/ai/anthropic-provider-form.tsx
+++ b/src/components/settings/ai/anthropic-provider-form.tsx
@@ -149,6 +149,7 @@ export function AnthropicProviderForm({
       <div>
         <Button
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={() => saveMutation.mutate()}
           disabled={saveMutation.isPending}
         >
diff --git a/src/components/settings/ai/codex-provider-form.tsx b/src/components/settings/ai/codex-provider-form.tsx
index ef10525f3..4e27c60c3 100644
--- a/src/components/settings/ai/codex-provider-form.tsx
+++ b/src/components/settings/ai/codex-provider-form.tsx
@@ -208,7 +208,7 @@ export function CodexProviderForm({
         <Button
           variant="outline"
           size="sm"
-          className="text-destructive shrink-0"
+          className="text-destructive min-h-11 shrink-0 sm:min-h-9"
           onClick={handleDisconnect}
           disabled={disconnecting}
         >
@@ -274,7 +274,7 @@ export function CodexProviderForm({
           variant="outline"
           onClick={handleConnect}
           disabled={devicePolling}
-          className="w-full sm:w-auto"
+          className="min-h-11 w-full sm:min-h-9 sm:w-auto"
         >
           {devicePolling ? (
             <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
diff --git a/src/components/settings/ai/fallback-chain-card.tsx b/src/components/settings/ai/fallback-chain-card.tsx
index 06122f91d..d1c5e4498 100644
--- a/src/components/settings/ai/fallback-chain-card.tsx
+++ b/src/components/settings/ai/fallback-chain-card.tsx
@@ -196,6 +196,7 @@ export function FallbackChainCard({
               aria-label={t("settings.ai.providerChain.moveUp")}
               disabled={idx === 0}
               onClick={() => move(idx, -1)}
+              className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
             >
               <ArrowUp className="h-4 w-4" />
             </Button>
@@ -206,6 +207,7 @@ export function FallbackChainCard({
               aria-label={t("settings.ai.providerChain.moveDown")}
               disabled={idx === entries.length - 1}
               onClick={() => move(idx, 1)}
+              className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
             >
               <ArrowDown className="h-4 w-4" />
             </Button>
@@ -214,7 +216,7 @@ export function FallbackChainCard({
               size="sm"
               variant="outline"
               aria-label={t("settings.ai.providerChain.removeFromChain")}
-              className="text-destructive"
+              className="text-destructive min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
               onClick={() => remove(idx)}
               disabled={entries.length <= 1}
             >
@@ -234,6 +236,7 @@ export function FallbackChainCard({
         )}
         <Button
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={() => saveMutation.mutate(entries)}
           disabled={saveMutation.isPending || entries.length === 0}
           data-testid="ai-fallback-chain-save"
@@ -247,7 +250,11 @@ export function FallbackChainCard({
         </Button>
         <AlertDialog>
           <AlertDialogTrigger asChild>
-            <Button size="sm" variant="outline">
+            <Button
+              size="sm"
+              variant="outline"
+              className="min-h-11 sm:min-h-9"
+            >
               <RotateCcw className="h-4 w-4" />
               {t("settings.ai.providerChain.resetDefaults")}
             </Button>
@@ -308,6 +315,7 @@ function AddProviderControl({
         type="button"
         size="sm"
         variant="outline"
+        className="min-h-11 sm:min-h-9"
         onClick={() => {
           if (isProviderType(picked)) onAdd(picked);
         }}
diff --git a/src/components/settings/ai/local-provider-form.tsx b/src/components/settings/ai/local-provider-form.tsx
index 7c18a92f7..a482df7e4 100644
--- a/src/components/settings/ai/local-provider-form.tsx
+++ b/src/components/settings/ai/local-provider-form.tsx
@@ -150,6 +150,7 @@ export function LocalProviderForm({
       <div>
         <Button
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={() => saveMutation.mutate()}
           disabled={saveMutation.isPending}
         >
diff --git a/src/components/settings/ai/openai-provider-form.tsx b/src/components/settings/ai/openai-provider-form.tsx
index 98110edec..d9654a4b2 100644
--- a/src/components/settings/ai/openai-provider-form.tsx
+++ b/src/components/settings/ai/openai-provider-form.tsx
@@ -186,6 +186,7 @@ export function OpenAIProviderForm({
       <div className="flex flex-wrap gap-2">
         <Button
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={() => saveMutation.mutate()}
           disabled={saveMutation.isPending}
         >
diff --git a/src/components/settings/ai/runtime-actions-row.tsx b/src/components/settings/ai/runtime-actions-row.tsx
index 265f1fc4b..c83a8f670 100644
--- a/src/components/settings/ai/runtime-actions-row.tsx
+++ b/src/components/settings/ai/runtime-actions-row.tsx
@@ -198,6 +198,7 @@ export function RuntimeActionsRow({
         <Button
           size="sm"
           variant="outline"
+          className="min-h-11 sm:min-h-9"
           onClick={runTest}
           disabled={testing}
           data-testid="ai-test-active-provider"
@@ -213,6 +214,7 @@ export function RuntimeActionsRow({
           <Button
             size="sm"
             variant="outline"
+            className="min-h-11 sm:min-h-9"
             onClick={regenerate}
             disabled={regen}
           >
diff --git a/src/components/settings/coach-memory-section.tsx b/src/components/settings/coach-memory-section.tsx
index f2a1c3670..80f079d01 100644
--- a/src/components/settings/coach-memory-section.tsx
+++ b/src/components/settings/coach-memory-section.tsx
@@ -154,6 +154,7 @@ export function CoachMemorySection({
                   type="button"
                   variant="outline"
                   size="sm"
+                  className="min-h-11 sm:min-h-9"
                   data-testid="settings-coach-memory-forget-all"
                   disabled={!isAuthenticated || forgetAll.isPending}
                 >
@@ -245,6 +246,7 @@ export function CoachMemorySection({
                       type="button"
                       variant="ghost"
                       size="sm"
+                      className="min-h-11 sm:min-h-9"
                       data-testid="settings-coach-memory-forget"
                       aria-label={t("settings.ai.coachMemory.forgetAria")}
                       // v1.11.2 — per-id pending: only the row being
diff --git a/src/components/settings/coach-prefs-section.tsx b/src/components/settings/coach-prefs-section.tsx
index b0ab641ea..a502d519f 100644
--- a/src/components/settings/coach-prefs-section.tsx
+++ b/src/components/settings/coach-prefs-section.tsx
@@ -338,6 +338,7 @@ export function CoachPrefsSection({ isAuthenticated }: CoachPrefsSectionProps) {
         <Button
           type="button"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={() => save.mutate(draft)}
           disabled={save.isPending || isLoading}
           data-slot="coach-prefs-save"
diff --git a/src/components/settings/cycle-tracking-card.tsx b/src/components/settings/cycle-tracking-card.tsx
index d5c3d4a13..c4469b068 100644
--- a/src/components/settings/cycle-tracking-card.tsx
+++ b/src/components/settings/cycle-tracking-card.tsx
@@ -80,7 +80,12 @@ export function CycleTrackingCard({
           />
         </div>
         {enabled ? (
-          <Button variant="outline" size="sm" asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="min-h-11 sm:min-h-9"
+            asChild
+          >
             <Link href="/cycle">{t("settings.cycleTracking.manage")}</Link>
           </Button>
         ) : null}
diff --git a/src/components/settings/dashboard-layout-section.tsx b/src/components/settings/dashboard-layout-section.tsx
index b302eeabb..028e35e8b 100644
--- a/src/components/settings/dashboard-layout-section.tsx
+++ b/src/components/settings/dashboard-layout-section.tsx
@@ -337,7 +337,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
           size="sm"
           onClick={() => resetMutation.mutate()}
           disabled={resetMutation.isPending}
-          className="self-end sm:self-auto"
+          className="min-h-11 self-end sm:min-h-9 sm:self-auto"
         >
           <RotateCcw className="h-3.5 w-3.5" />
           {t("dashboard.layoutReset")}
@@ -551,6 +551,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
           <Button
             variant="outline"
             size="sm"
+            className="min-h-11 sm:min-h-9"
             onClick={() => setDraft(null)}
             disabled={saveMutation.isPending}
           >
@@ -558,6 +559,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
           </Button>
           <Button
             size="sm"
+            className="min-h-11 sm:min-h-9"
             onClick={() => layout && saveMutation.mutate(layout)}
             disabled={saveMutation.isPending}
           >
diff --git a/src/components/settings/export-section.tsx b/src/components/settings/export-section.tsx
index 2e020214e..8b84ce5f6 100644
--- a/src/components/settings/export-section.tsx
+++ b/src/components/settings/export-section.tsx
@@ -267,6 +267,7 @@ function CsvCard({
           data-testid={actionTestId}
           variant="outline"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={handleDownload}
           disabled={busy}
         >
@@ -354,6 +355,7 @@ function MedicationsCsvCard() {
           data-testid="export-action-medications-csv"
           variant="outline"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={handleDownload}
           disabled={busy}
         >
@@ -443,6 +445,7 @@ function FullBackupCard() {
           data-testid="export-action-full-backup"
           variant="outline"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={handleDownload}
           disabled={busy}
         >
@@ -552,6 +555,7 @@ function CycleExportCard() {
           data-testid="export-action-cycle"
           variant="outline"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={handleGenerate}
           disabled={busy}
         >
diff --git a/src/components/settings/import-panel.tsx b/src/components/settings/import-panel.tsx
index cab5ed23c..039d4e59a 100644
--- a/src/components/settings/import-panel.tsx
+++ b/src/components/settings/import-panel.tsx
@@ -366,6 +366,7 @@ function AppleHealthImportCard() {
           type="button"
           variant="outline"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           disabled={busy}
           onClick={() => fileInputRef.current?.click()}
           data-testid="import-action-apple-health"
@@ -615,6 +616,7 @@ function JsonImportCard() {
           type="button"
           variant="outline"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={() => fileInputRef.current?.click()}
           data-testid="import-json-choose-file"
         >
@@ -625,6 +627,7 @@ function JsonImportCard() {
           type="button"
           variant="ghost"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={downloadExample}
           data-testid="import-json-download-example"
         >
@@ -634,6 +637,7 @@ function JsonImportCard() {
         <Button
           type="button"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           disabled={busy || text.trim().length === 0}
           onClick={handleImport}
           data-testid="import-action-json"
@@ -863,6 +867,7 @@ function CsvImportCard() {
           type="button"
           variant="outline"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={() => fileInputRef.current?.click()}
           data-testid="import-csv-choose-file"
         >
@@ -873,6 +878,7 @@ function CsvImportCard() {
           type="button"
           variant="ghost"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           onClick={downloadExample}
           data-testid="import-csv-download-example"
         >
@@ -883,6 +889,7 @@ function CsvImportCard() {
           type="button"
           variant="secondary"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           disabled={busy || text.trim().length === 0}
           onClick={() => void send(true)}
           data-testid="import-csv-preview"
@@ -895,6 +902,7 @@ function CsvImportCard() {
         <Button
           type="button"
           size="sm"
+          className="min-h-11 sm:min-h-9"
           disabled={busy || text.trim().length === 0}
           onClick={() => void send(false)}
           data-testid="import-action-csv"
diff --git a/src/components/settings/injection-sites-card.tsx b/src/components/settings/injection-sites-card.tsx
index 0832df568..3c1faf124 100644
--- a/src/components/settings/injection-sites-card.tsx
+++ b/src/components/settings/injection-sites-card.tsx
@@ -72,7 +72,7 @@ export function InjectionSitesCard({
         title={t("settings.globalExcludedInjectionSitesLabel")}
         description={t("settings.globalExcludedInjectionSitesHint")}
       />
-      <div className="mt-3 grid grid-cols-2 gap-2 pl-7">
+      <div className="mt-3 grid grid-cols-1 gap-2 pl-7 sm:grid-cols-2">
         {INJECTION_SITE_KEYS.map((site) => (
           <label key={site} className="flex items-center gap-2 text-sm">
             <Checkbox
diff --git a/src/components/settings/insights-pill-order-section.tsx b/src/components/settings/insights-pill-order-section.tsx
index 5e860aebb..248e61053 100644
--- a/src/components/settings/insights-pill-order-section.tsx
+++ b/src/components/settings/insights-pill-order-section.tsx
@@ -224,7 +224,7 @@ export function InsightsPillOrderSection({ id }: { id?: string }) {
           onClick={() => saveMutation.mutate(draftTiles)}
           disabled={busy || !dirty}
           data-slot="insights-pill-order-save"
-          className="self-end sm:self-auto"
+          className="min-h-11 self-end sm:min-h-9 sm:self-auto"
         >
           {saveMutation.isPending && (
             <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
diff --git a/src/components/settings/thresholds-editor-section.tsx b/src/components/settings/thresholds-editor-section.tsx
index e1cf9aa80..c4035b2e2 100644
--- a/src/components/settings/thresholds-editor-section.tsx
+++ b/src/components/settings/thresholds-editor-section.tsx
@@ -324,6 +324,7 @@ function MetricRow({
                 onClick={() => valid && onSave({ min: minNum, max: maxNum })}
                 disabled={busy || !valid}
                 size="sm"
+                className="min-h-11 sm:min-h-9"
               >
                 {t("common.save")}
               </Button>
@@ -331,6 +332,7 @@ function MetricRow({
                 <Button
                   variant="outline"
                   size="sm"
+                  className="min-h-11 sm:min-h-9"
                   onClick={onReset}
                   disabled={busy}
                 >