From 957f8e9b933c88d2a8a825b51d582891128e2874 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 10 May 2026 13:04:01 +0200
Subject: [PATCH] fix(settings): equalize input heights across all settings
 sections

Settings inputs and selects rendered at four different heights on
Pixel 5: 32 px (AI add-provider), 36 px (account form, export, ntfy /
telegram), 40 px (AI active-provider) and 44 px (dashboard "Compare to"
trigger). The mismatch was visible whenever two cards lived next to
each other, e.g. the 40-px provider select sat directly above a 32-px
"Add provider" select inside the same column.

Standardize on the shared 36-px contract (`h-9`, matching `<Input>` and
the default `<SelectTrigger>` size) for every text-entry field across
Settings:

- AI active-provider native select: `h-10` -> `h-9`
- AI fallback-chain "Add provider" native select: `h-8` -> `h-9`
- Dashboard "Compare to" `<SelectTrigger>`: drop `min-h-11` so the
  default `h-9` applies

The 44-px tap-target floor (WCAG 2.5.5) still applies to mobile
nav-level controls; for inline form fields the 36-px height matches
the rest of the settings shell and the desktop sidebar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/settings/ai-section.tsx               | 10 ++++++----
 src/components/settings/dashboard-layout-section.tsx |  9 ++++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/settings/ai-section.tsx b/src/components/settings/ai-section.tsx
index 57c8620ba..4d5f1eba0 100644
--- a/src/components/settings/ai-section.tsx
+++ b/src/components/settings/ai-section.tsx
@@ -343,8 +343,10 @@ function ProviderStatusBadges({
 /**
  * The single Pulldown that drives every form below it. Uses a native
  * `<select>` so the SSR-only settings test renders deterministically
- * without a portal-based Radix tree. Mobile: full-width, generous
- * height (`h-10`) so finger taps land cleanly on the chevron.
+ * without a portal-based Radix tree. Mobile: full-width, height matched
+ * to the shared 36-px input contract used everywhere else in Settings
+ * (`<Input>` is `h-9`); tap target stays comfortable thanks to the
+ * full-width chevron region.
  */
 function ActiveProviderSelect({
   value,
@@ -373,7 +375,7 @@ function ActiveProviderSelect({
           const next = e.target.value;
           if (isProviderType(next)) onChange(next);
         }}
-        className="bg-background border-input mt-1 h-10 w-full rounded-md border px-3 text-sm sm:max-w-md"
+        className="bg-background border-input mt-1 h-9 w-full rounded-md border px-3 text-sm sm:max-w-md"
       >
         {PROVIDER_TYPES.map((p) => (
           <option key={p} value={p}>
@@ -1509,7 +1511,7 @@ function AddProviderControl({
         aria-label={t("settings.ai.providerChain.addProvider")}
         value={picked}
         onChange={(e) => setPicked(e.target.value)}
-        className="bg-background border-input h-8 rounded-md border px-2 text-sm"
+        className="bg-background border-input h-9 rounded-md border px-2 text-sm"
       >
         {addable.map((p) => (
           <option key={p} value={p}>
diff --git a/src/components/settings/dashboard-layout-section.tsx b/src/components/settings/dashboard-layout-section.tsx
index e6a7b42dc..fc1a7ec35 100644
--- a/src/components/settings/dashboard-layout-section.tsx
+++ b/src/components/settings/dashboard-layout-section.tsx
@@ -182,8 +182,11 @@ export function DashboardLayoutSection({ id }: { id: string }) {
 
       {/* v1.4.16 phase B8 — comparison baseline picker. Lives at the top
           of the section because it changes how every chart + tile below
-          renders, not just one. Mobile-friendly: full-width Select with
-          a 44px tap target on touch viewports per the Wave-C polish. */}
+          renders, not just one. v1.4.19 A6: height standardised to the
+          shared 36-px input contract used by every other Settings input
+          / select; the previous `min-h-11` (44 px) made this trigger
+          look like an outlier next to the 36-px Username/Email/Date-of-
+          birth fields one card up. */}
       {layout && (
         <div className="space-y-2">
           <label
@@ -201,7 +204,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
           >
             <SelectTrigger
               id="comparison-baseline"
-              className="min-h-11 w-full sm:w-72"
+              className="w-full sm:w-72"
               data-slot="comparison-baseline-trigger"
             >
               <SelectValue />