Skip to content

Commit

Permalink
UX: Make input sizing consistent across all browsers (#26159)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
davidtaylorhq committed Mar 20, 2024
1 parent 6d137a4 commit d0d4a36
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 16 deletions.
2 changes: 1 addition & 1 deletion app/assets/stylesheets/common/font-variables.scss
Expand Up @@ -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;
Expand Down
6 changes: 1 addition & 5 deletions app/assets/stylesheets/common/foundation/mixins.scss
Expand Up @@ -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 {
Expand Down
12 changes: 2 additions & 10 deletions app/assets/stylesheets/mobile/discourse.scss
Expand Up @@ -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 {
Expand Down

2 comments on commit d0d4a36

@discoursebot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/some-buttons-are-unusually-big-on-meta/300374/3

@discoursebot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/some-buttons-are-unusually-big-on-meta/300374/5

Please sign in to comment.