From 33d0eb9eb204bddbc1d8d3779f6b66009b870dcb Mon Sep 17 00:00:00 2001 From: Grug Date: Fri, 23 Oct 2026 16:02:47 +0800 Subject: [PATCH] Use 16px text on mobile for the remaining text fields to stop iOS zoom (#218) --- CHANGELOG.md | 2 +- src/css/styles/luma.css | 12 ++++++++---- src/css/styles/maia.css | 12 ++++++++---- src/css/styles/nova.css | 12 ++++++++---- src/css/styles/rhea.css | 12 ++++++++---- src/css/styles/sera.css | 12 ++++++++---- src/css/styles/vega.css | 12 ++++++++---- 7 files changed, 49 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 388aee6..52c426a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,7 +29,7 @@ - Kept a parent Popover, Dropdown Menu, Select or Combobox open when a nested one opens inside it. Sibling components still close each other. - Scoped Sidebar navigation styles to the sidebar's direct child `nav` (`.sidebar > nav`), so other `nav` elements inside a sidebar, such as a Tabs list, are no longer fixed and stacked. - Stopped Dialogs and Command Dialogs from closing when a press starts inside the dialog and the drag ends on the backdrop. Updated the Nunjucks and Jinja templates and the docs examples. Based on [#104](https://github.com/hunvreus/basecoat/pull/104) by [@PhilipdeRijk](https://github.com/PhilipdeRijk). -- Fixed iOS auto-zoom when tapping the Select and Command search inputs by using `text-base` below the `md` breakpoint, like regular inputs. +- Fixed iOS auto-zoom when tapping the Combobox input, the Combobox chips input, the Command search input, native Selects, and Input Group inputs and textareas by using `text-base` below the `md` breakpoint, like regular inputs. The compact Lyra and Mira styles keep their smaller sizes. - Stopped the Toast docs example from pushing its fragment URL into the browser history with HTMX. - Replaced the `.form` migration snippet in the 1.0.0 notes, which fails in Tailwind v4, with markup that works. diff --git a/src/css/styles/luma.css b/src/css/styles/luma.css index 7204a0f..998080b 100644 --- a/src/css/styles/luma.css +++ b/src/css/styles/luma.css @@ -217,7 +217,7 @@ /* Native Select */ .field > select, select.select { - @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-3xl border py-1 ps-3 pe-8 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8; + @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-3xl border py-1 ps-3 pe-8 text-base md:text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8; @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem]; } @@ -373,7 +373,7 @@ } .command > header input { - @apply ps-1.5 text-sm placeholder:text-muted-foreground; + @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground; } .command [role='menu'] { @@ -464,6 +464,10 @@ @apply bg-input/50 border-transparent focus-within:border-ring focus-within:ring-ring/30 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-9 gap-1.5 rounded-3xl border bg-clip-padding px-1.5 py-1.5 text-sm transition-[color,box-shadow,background-color] focus-within:ring-3 has-[[aria-invalid=true]]:ring-3; } + .combobox-chips > input[role='combobox'] { + @apply text-base md:text-sm; + } + .combobox-chip { @apply bg-input text-foreground dark:bg-input/60 h-5.5 gap-1 rounded-3xl px-2 text-xs font-medium has-[>.combobox-chip-remove]:pe-0; } @@ -948,7 +952,7 @@ @apply rounded-3xl; } .input-group > :is(input, select, [data-control]) { - @apply px-3 py-1 text-sm; + @apply px-3 py-1 text-base md:text-sm; } .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) { @@ -960,7 +964,7 @@ } .input-group > textarea { - @apply px-3 py-2.5 text-sm; + @apply px-3 py-2.5 text-base md:text-sm; } .input-group > :is(span, [role='group'], header, footer), diff --git a/src/css/styles/maia.css b/src/css/styles/maia.css index 76631b1..f0a4659 100644 --- a/src/css/styles/maia.css +++ b/src/css/styles/maia.css @@ -209,7 +209,7 @@ /* Native Select */ .field > select, select.select { - @apply border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-4xl border py-1 ps-3 pe-8 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8; + @apply border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-4xl border py-1 ps-3 pe-8 text-base md:text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8; @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.875rem] bg-size-[1rem]; } @@ -365,7 +365,7 @@ } .command > header input { - @apply ps-1.5 text-sm placeholder:text-muted-foreground; + @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground; } .command [role='menu'] { @@ -456,6 +456,10 @@ @apply bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-9 gap-1.5 rounded-4xl border bg-clip-padding px-1.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-[[aria-invalid=true]]:ring-[3px]; } + .combobox-chips > input[role='combobox'] { + @apply text-base md:text-sm; + } + .combobox-chip { @apply bg-muted-foreground/10 text-foreground h-5.5 gap-1 rounded-4xl px-2 text-xs font-medium has-[>.combobox-chip-remove]:pe-0; } @@ -936,7 +940,7 @@ @apply rounded-2xl; } .input-group > :is(input, select, [data-control]) { - @apply px-3 py-1 text-sm; + @apply px-3 py-1 text-base md:text-sm; } .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) { @@ -948,7 +952,7 @@ } .input-group > textarea { - @apply px-3 py-2 text-sm; + @apply px-3 py-2 text-base md:text-sm; } .input-group > :is(span, [role='group'], header, footer), diff --git a/src/css/styles/nova.css b/src/css/styles/nova.css index 0034653..7e09e8f 100644 --- a/src/css/styles/nova.css +++ b/src/css/styles/nova.css @@ -205,7 +205,7 @@ /* Native Select */ .field > select, select.select { - @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-fit rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5; + @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-fit rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-base md:text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5; @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem]; } @@ -361,7 +361,7 @@ } .command > header input { - @apply ps-1.5 text-sm placeholder:text-muted-foreground; + @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground; } .command [role='menu'] { @@ -452,6 +452,10 @@ @apply dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-8 gap-1 rounded-lg border bg-transparent bg-clip-padding px-1 py-1 text-sm transition-colors focus-within:ring-3 has-[[aria-invalid=true]]:ring-3; } + .combobox-chips > input[role='combobox'] { + @apply text-base md:text-sm; + } + .combobox-chip { @apply bg-muted text-foreground h-5.25 gap-1 rounded-sm px-1.5 text-xs font-medium has-[>.combobox-chip-remove]:pe-0; } @@ -951,7 +955,7 @@ } .input-group > :is(input, select, [data-control]) { - @apply px-2.5 py-1 text-sm; + @apply px-2.5 py-1 text-base md:text-sm; } .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) { @@ -963,7 +967,7 @@ } .input-group > textarea { - @apply px-2.5 py-2 text-sm; + @apply px-2.5 py-2 text-base md:text-sm; } .input-group > :is(span, [role='group'], header, footer), diff --git a/src/css/styles/rhea.css b/src/css/styles/rhea.css index 36000b2..968adef 100644 --- a/src/css/styles/rhea.css +++ b/src/css/styles/rhea.css @@ -217,7 +217,7 @@ /* Native Select */ .field > select, select.select { - @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-fit rounded-2xl border py-1 ps-2.5 pe-8 text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7; + @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-fit rounded-2xl border py-1 ps-2.5 pe-8 text-base md:text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7; @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem]; } @@ -373,7 +373,7 @@ } .command > header input { - @apply ps-1.5 text-sm placeholder:text-muted-foreground; + @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground; } .command [role='menu'] { @@ -464,6 +464,10 @@ @apply bg-input/50 border-transparent focus-within:border-ring focus-within:ring-ring/30 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-8 gap-1 rounded-2xl border bg-clip-padding px-1 py-1 text-sm transition-[color,box-shadow] duration-200 focus-within:ring-3 has-[[aria-invalid=true]]:ring-3; } + .combobox-chips > input[role='combobox'] { + @apply text-base md:text-sm; + } + .combobox-chip { @apply bg-input text-foreground dark:bg-input/60 h-5.25 gap-1 rounded-2xl px-1.5 text-xs font-medium has-[>.combobox-chip-remove]:pe-0.5; } @@ -945,7 +949,7 @@ @apply opacity-50; } .input-group > :is(input, select, [data-control]) { - @apply px-2.5 py-1 text-sm; + @apply px-2.5 py-1 text-base md:text-sm; } .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) { @@ -957,7 +961,7 @@ } .input-group > textarea { - @apply px-2.5 py-2 text-sm; + @apply px-2.5 py-2 text-base md:text-sm; } .input-group > :is(span, [role='group'], header, footer), diff --git a/src/css/styles/sera.css b/src/css/styles/sera.css index d62415e..80867dc 100644 --- a/src/css/styles/sera.css +++ b/src/css/styles/sera.css @@ -221,7 +221,7 @@ /* Native Select */ .field > select, select.select { - @apply border-transparent border-b-input bg-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 w-fit rounded-none border py-2 ps-0 pe-8 text-sm transition-[color,border-color] data-[size=sm]:h-9; + @apply border-transparent border-b-input bg-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 w-fit rounded-none border py-2 ps-0 pe-8 text-base md:text-sm transition-[color,border-color] data-[size=sm]:h-9; @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0] bg-size-[0.875rem]; } @@ -377,7 +377,7 @@ } .command > header input { - @apply h-9 ps-1.5 pe-2 text-sm placeholder:text-muted-foreground; + @apply h-9 ps-1.5 pe-2 text-base md:text-sm placeholder:text-muted-foreground; } .command [role='menu'] { @@ -468,6 +468,10 @@ @apply border-transparent border-b-input bg-transparent focus-within:border-b-ring has-[[aria-invalid=true]]:border-b-destructive dark:has-[[aria-invalid=true]]:border-b-destructive/50 min-h-10 gap-1.5 rounded-none border bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color]; } + .combobox-chips > input[role='combobox'] { + @apply text-base md:text-sm; + } + .combobox-chip { @apply bg-muted text-foreground h-5.5 gap-1 rounded-none px-2 text-xs font-medium has-[>.combobox-chip-remove]:pe-0; } @@ -970,7 +974,7 @@ @apply opacity-50; } .input-group > :is(input, select, [data-control]) { - @apply px-0 py-1 text-sm; + @apply px-0 py-1 text-base md:text-sm; } .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) { @@ -982,7 +986,7 @@ } .input-group > textarea { - @apply px-0 py-2.5 text-sm; + @apply px-0 py-2.5 text-base md:text-sm; } .input-group > :is(span, [role='group'], header, footer), diff --git a/src/css/styles/vega.css b/src/css/styles/vega.css index 5b90d66..fa6f661 100644 --- a/src/css/styles/vega.css +++ b/src/css/styles/vega.css @@ -205,7 +205,7 @@ /* Native Select */ .field > select, select.select { - @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8; + @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-base md:text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8; @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem]; } @@ -361,7 +361,7 @@ } .command > header input { - @apply ps-1.5 text-sm placeholder:text-muted-foreground; + @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground; } .command [role='menu'] { @@ -452,6 +452,10 @@ @apply dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-9 gap-1.5 rounded-md border bg-transparent bg-clip-padding px-1.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-[[aria-invalid=true]]:ring-3; } + .combobox-chips > input[role='combobox'] { + @apply text-base md:text-sm; + } + .combobox-chip { @apply bg-muted text-foreground h-5.5 gap-1 rounded-sm px-1.5 text-xs font-medium has-[>.combobox-chip-remove]:pe-0; } @@ -950,7 +954,7 @@ @apply opacity-50; } .input-group > :is(input, select, [data-control]) { - @apply px-2.5 py-1 text-sm; + @apply px-2.5 py-1 text-base md:text-sm; } .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) { @@ -962,7 +966,7 @@ } .input-group > textarea { - @apply px-2.5 py-2 text-sm; + @apply px-2.5 py-2 text-base md:text-sm; } .input-group > :is(span, [role='group'], header, footer),