UX: Replace font-size-ios-input workaround (#30877)

By default, iOS safari will automatically zoom into focused inputs with
font-sizes less than 16px. To avoid this, we had a CSS rule to ensure
inputs always had a large font-size on iOS. This worked, but did lead to
design inconsistencies.

Instead, we can set `user-scalable=no` on the viewport meta tag. Since
iOS 10, this property doesn't actually stop users zooming. But it *does*
still prevent the automatic zooming of inputs. So it solves our zoom
problem, and allows us to remove the CSS font-size workaround.

app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js

@@ -0,0 +1,20 @@
+/*
+  In iOS Safari, setting user-scalable=no doesn't actually prevent the user from zooming in.
+  But, it does prevent the annoying 'auto zoom' when focussing input fields with small font-sizes.
+*/
+export default {
+  initialize(container) {
+    if (!container.lookup("service:capabilities").isIOS) {
+      return;
+    }
+
+    const viewport = document.querySelector("meta[name=viewport]");
+    if (viewport) {
+      const current = viewport.getAttribute("content");
+      viewport.setAttribute(
+        "content",
+        current.replace("user-scalable=yes", "user-scalable=no")
+      );
+    }
+  },
+};

app/assets/stylesheets/common/font-variables.scss

@@ -28,9 +28,6 @@
   --font-down-1-rem: 0.8706rem;
   --font-down-2-rem: 0.7579rem;
 
-  // inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
-  --font-size-ios-input: max(1em, 16px);
-
   // Common line-heights
   --line-height-small: 1;
   --line-height-medium: 1.2; // Headings or large text

app/assets/stylesheets/common/foundation/mixins.scss

@@ -115,12 +115,6 @@ $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;
-  }
 }
 
 @mixin sticky {

app/assets/stylesheets/mobile/discourse.scss

@@ -11,7 +11,6 @@ body {
 .ios-device {
   textarea {
     background-color: var(--secondary);
-    font-size: var(--font-size-ios-input);
     -webkit-tap-highlight-color: transparent;
   }
 

app/assets/stylesheets/mobile/form-kit/_control-input.scss

@@ -1,5 +1,4 @@
 .form-kit__before-input,
 .form-kit__after-input {
-  font-size: var(--font-size-ios-input);
   height: 2.25em;
 }