From d0d4a363d4801a274caad50ffa509fc64740f238 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Wed, 20 Mar 2024 16:23:44 +0000
Subject: [PATCH] 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.
---
 app/assets/stylesheets/common/font-variables.scss    |  2 +-
 app/assets/stylesheets/common/foundation/mixins.scss |  6 +-----
 app/assets/stylesheets/mobile/discourse.scss         | 12 ++----------
 3 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/common/font-variables.scss b/app/assets/stylesheets/common/font-variables.scss
index 4d6972e54bcea8..7b9647a88127c4 100644
--- a/app/assets/stylesheets/common/font-variables.scss
+++ b/app/assets/stylesheets/common/font-variables.scss
@@ -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;
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index eb861d2ea28784..481ff862082bfd 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -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 {
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index df3b7ae23870c2..65c6f108847c5c 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -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 {