Form elements needs to be 16px to avoid Safari zooming on mobile

This commit is contained in:
Timothy Armes
2024-09-25 17:14:49 +02:00
parent 38edadd591
commit e3cf8ff8fd
4 changed files with 6 additions and 5 deletions
@@ -37,7 +37,7 @@ export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
return (
<div
className={twMerge(
"flex w-full content-center rounded-lg border p-3 text-sm",
"flex w-full content-center rounded-lg border p-3",
"border-gray-300 bg-gray-50 text-gray-900 shadow-sm",
"dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 ",
!error &&
@@ -50,7 +50,7 @@ export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
inputRef={inputRef}
mask={mask ?? ""}
className={twMerge(
"w-full border-none bg-transparent text-sm outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0",
"w-full border-none bg-transparent outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0",
"text-gray-900 dark:text-white",
inputClass,
)}
+1 -1
View File
@@ -86,7 +86,7 @@ export const TextAreaField = <
aria-invalid={hasError}
disabled={disabled}
className={twMerge(
"flex w-full content-center rounded-lg border p-3 text-sm",
"flex w-full content-center rounded-lg border p-3",
"border-gray-300 bg-gray-50 text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
"dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
hasError && "!border-orange-700 focus:!border-orange-700",
+1 -1
View File
@@ -105,7 +105,7 @@ export const TextField = <
aria-invalid={hasError}
disabled={disabled}
className={twMerge(
"flex w-full content-center rounded-lg border p-3 text-sm",
"flex w-full content-center rounded-lg border p-3",
"border-gray-300 bg-gray-50 text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
"dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
hasError && "!border-orange-700 focus:!border-orange-700",