Set a default minimum font size of 16px for inputs on touch devices #1096
Conversation
Previously the font size for inputs was taken from the `text-sm` default for `body`, which evaluates to 14px. This is below the threshold on iOS that causes the browser to zoom into the field when focused. Fixes #1061 See also https://tailwindcss.com/docs/preflight#extending-preflight
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer base { |
There was a problem hiding this comment.
This follows Tailwind's recommendation for extending base styles: https://tailwindcss.com/docs/preflight#extending-preflight. If there is a reason we shouldn't be doing that, please let me know!
There was a problem hiding this comment.
Yep, this is fine and conventional.
| input, textarea { | ||
| font-size: max(16px, 100%); | ||
| } | ||
| } |
There was a problem hiding this comment.
Should we upstream this into the frontend-shared package?
There was a problem hiding this comment.
Actually, I want to think about that. I've found so far that it's easier to wrangle base styles per-app, as that's where our variation tends to be. Not sure. Perhaps we could track in a separate ticket?
There was a problem hiding this comment.
Perhaps we could track in a separate ticket?
Will do 👍
There was a problem hiding this comment.
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer base { |
There was a problem hiding this comment.
Yep, this is fine and conventional.
| input, textarea { | ||
| font-size: max(16px, 100%); | ||
| } | ||
| } |
There was a problem hiding this comment.
Actually, I want to think about that. I've found so far that it's easier to wrangle base styles per-app, as that's where our variation tends to be. Not sure. Perhaps we could track in a separate ticket?
Previously the font size for inputs was taken from the
text-smdefault forbody, which evaluates to 14px. This is below the threshold on iOS that causes the browser to zoom into the field when focused.Fixes #1061
See also https://tailwindcss.com/docs/preflight#extending-preflight
Testing:
If testing with the local dev server on an actual mobile device, you will need to edit the
client_embed_urlsetting to point to the IP of your dev system, in order for the client to load.