UX: Make input sizing consistent across all browsers (#26159)

Previously we had an iOS-specific sizing rule which would increase inputs to `1.07em`, which would bring them over the 16px 'zoom on focus' threshold in some (but technically, not all) situations.

This commit does two things:

1. Updates the sizing rule from `1.07em` to `max(1em, 16px)`. Essentially: use the cascaded font size, unless it is smaller than 16px

2. Applies that sizing rule on all platforms. This will make Discourse design/theming more consistent across different devices

It also removes some associated CSS rules which no longer make sense.
This commit is contained in:
David Taylor 2024-03-20 16:23:44 +00:00 committed by GitHub
parent 6d137a41c2
commit d0d4a363d4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 4 additions and 16 deletions

View File

@ -30,7 +30,7 @@
// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
// with base at 15px, the below gives 16.05px
--font-size-ios-input: 1.07em;
--font-size-input: max(1em, 16px);
// Common line-heights
--line-height-small: 1;

View File

@ -114,11 +114,7 @@ $hpad: 0.65em;
line-height: normal;
box-sizing: border-box;
padding: $vpad $hpad;
.ios-device & {
font-size: var(--font-size-ios-input);
padding-top: $vpad * 0.8;
padding-bottom: $vpad * 0.8;
}
font-size: var(--font-size-input);
}
@mixin sticky {

View File

@ -9,16 +9,8 @@ body {
background-color: var(--secondary);
}
.ios-device {
textarea {
background-color: var(--secondary);
font-size: var(--font-size-ios-input);
-webkit-tap-highlight-color: transparent;
}
input#reply-title {
-webkit-tap-highlight-color: transparent;
}
textarea {
font-size: var(--font-size-input);
}
blockquote {