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
+2 -1
View File
@@ -72,5 +72,6 @@
"eslint-plugin-react-hooks": "^5.0.0-canary-7118f5dd7-20230705",
"prettier": "^3.1.1",
"prettier-plugin-tailwindcss": "^0.5.3"
}
},
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
}
@@ -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",