hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-11 04:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use 16px text on mobile for the remaining text fields to stop iOS zoom (#218)

Browse Source
This commit is contained in:
Grug
2026-10-23 16:02:47 +08:00
committed by GitHub
parent 9de91ee607
commit 33d0eb9eb2
7 changed files with 49 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1 -1
View File
@@ -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.
src/css/styles/luma.css
+8 -4
View File
@@ -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),
src/css/styles/maia.css
+8 -4
View File
@@ -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),
src/css/styles/nova.css
+8 -4
View File
@@ -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),
src/css/styles/rhea.css
+8 -4
View File
@@ -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),
src/css/styles/sera.css
+8 -4
View File
@@ -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),
src/css/styles/vega.css
+8 -4
View File
@@ -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),