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", "eslint-plugin-react-hooks": "^5.0.0-canary-7118f5dd7-20230705",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-tailwindcss": "^0.5.3" "prettier-plugin-tailwindcss": "^0.5.3"
} },
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
} }
@@ -37,7 +37,7 @@ export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
return ( return (
<div <div
className={twMerge( 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", "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 ", "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 ",
!error && !error &&
@@ -50,7 +50,7 @@ export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
inputRef={inputRef} inputRef={inputRef}
mask={mask ?? ""} mask={mask ?? ""}
className={twMerge( 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", "text-gray-900 dark:text-white",
inputClass, inputClass,
)} )}
+1 -1
View File
@@ -86,7 +86,7 @@ export const TextAreaField = <
aria-invalid={hasError} aria-invalid={hasError}
disabled={disabled} disabled={disabled}
className={twMerge( 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", "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", "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", hasError && "!border-orange-700 focus:!border-orange-700",
+1 -1
View File
@@ -105,7 +105,7 @@ export const TextField = <
aria-invalid={hasError} aria-invalid={hasError}
disabled={disabled} disabled={disabled}
className={twMerge( 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", "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", "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", hasError && "!border-orange-700 focus:!border-orange-700",