fix(ui): lift the NativeSelect primitive to the 40 px tap-target floor

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.
This commit is contained in:
Marc-André Bombeck committed 2026-05-15 21:42:08 +02:00
1 parent e1befb4523
commit 0c6d728f9a
1 file changed
+12 -6
+12 -6
View File
@@ -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>;