From 0c6d728f9ab78823dcedce6aa35f571585f42bd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 21:42:08 +0200
Subject: [PATCH] fix(ui): lift the NativeSelect primitive to the 40 px
 tap-target floor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MB7 extracted three drifted local `NATIVE_SELECT_CLASS` constants
into the shared primitive at `h-9` (36 px) — the pre-v1.4.27 floor.
MB2 had already lifted Input + Select + SelectTrigger to `h-10`
(40 px) for the WCAG 2.5.5 tap-target sweep; the NativeSelect
extraction missed that contract bump and the three settings + admin
surfaces consuming it (account-section gender + language + timezone,
timezone-picker, general-settings-section default-language) now
render one step shorter than the Input rows they share a grid with.

The settings-mobile-consistency e2e spec already asserts a uniform
40 px floor across every `section input + section select` on
/settings/account and a 40 px floor across every `section select`
on /settings/ai; the primitive bump aligns the visual rhythm with
both the rest of the form and the test contract.
---
 src/components/ui/native-select.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/native-select.tsx b/src/components/ui/native-select.tsx
index 530cbdac9..05194bcde 100644
--- a/src/components/ui/native-select.tsx
+++ b/src/components/ui/native-select.tsx
@@ -10,16 +10,22 @@ import { cn } from "@/lib/utils";
  * Three settings/admin surfaces (`AccountSection`, `TimezonePicker`,
  * `GeneralSettingsSection`) each declared a local `NATIVE_SELECT_CLASS`
  * constant that traced the same visual contract as the shadcn
- * `<SelectTrigger>` (border + bg + ring tokens, `h-9` floor, identical
- * focus vocabulary). The three copies had drifted slightly — one
- * dropped `w-full`, another dropped the `shadow-xs` token — so the
- * three forms rendered at subtly different weights despite reading
- * "the same select" to the user.
+ * `<SelectTrigger>` (border + bg + ring tokens, focus vocabulary).
+ * The three copies had drifted slightly — one dropped `w-full`,
+ * another dropped the `shadow-xs` token — so the three forms rendered
+ * at subtly different weights despite reading "the same select" to
+ * the user.
  *
  * The primitive collapses the duplicates. Consumers wrap it like a
  * raw `<select>` and the className still composes via `cn(...)` so
  * site-specific tweaks (`sm:max-w-sm`, etc.) keep working.
  *
+ * Height: `h-10` (40 px) — matches the v1.4.27 tap-target floor on
+ * `<Input>` and `<SelectTrigger>` (MB2). The legacy `h-9` (36 px)
+ * the three call sites carried was the pre-v1.4.27 contract; the
+ * primitive extraction lands at the new floor so every form input on
+ * the same row reads at the same height.
+ *
  * Why native? The shadcn `<Select>` from `@radix-ui/react-select` is
  * the better keyboard experience on desktop but pulls in extra
  * client JS and does not show the iOS / Android native picker.
@@ -30,7 +36,7 @@ import { cn } from "@/lib/utils";
  * rows.
  */
 const NATIVE_SELECT_CLASS =
-  "border-input bg-background text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none";
+  "border-input bg-background text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none";
 
 export type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;