Merge pull request #1489 from sharetribe/update-font-size-textarea-select

Update font-size for textarea and select: otherwise mobile Safari zooms

Author: Gnito

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2021-XX-XX
 
+- [fix] Mobile safari zooms if input-related elements have smaller font-size than 16px. This updates
+  textarea and select element styles too. [#1489](https://github.com/sharetribe/ftw-daily/pull/1489)
 - [fix] Dependabot: Bump passport-oauth2 from 1.5.0 to 1.6.1
   [#1487](https://github.com/sharetribe/ftw-daily/pull/1487)
 - [fix] Fix bugs in checkout process:

src/styles/marketplaceDefaults.css

@@ -206,22 +206,6 @@ h6 {
   @apply --marketplaceH6FontStyles;
 }
 
-input {
-  font-family: var(--fontFamily);
-  font-weight: var(--fontWeightMedium);
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: -0.1px;
-  /* No margins for default font */
-
-  @media (--viewportMedium) {
-    font-size: 16px;
-    line-height: 32px;
-  }
-}
-
-textarea,
-select,
 li {
   @apply --marketplaceDefaultFontStyles;
 }
@@ -268,14 +252,17 @@ button {
 
 select {
   @apply --marketplaceSelectStyles;
+  @apply --marketplaceInputFontStyles;
 }
 
 input {
   @apply --marketplaceInputStyles;
+  @apply --marketplaceInputFontStyles;
 }
 
 textarea {
   @apply --marketplaceInputStyles;
+  @apply --marketplaceInputFontStyles;
 
   /* Todo: All textareas are using auto-sizing extension which currently calculates required space incorrectly when box-sixing is "border-box" */
   box-sizing: content-box;

src/styles/propertySets.css

@@ -528,6 +528,20 @@
     }
   }
 
+  --marketplaceInputFontStyles: {
+    font-family: var(--fontFamily);
+    font-weight: var(--fontWeightMedium);
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: -0.1px;
+    /* No margins for default font */
+
+    @media (--viewportMedium) {
+      font-size: 16px;
+      line-height: 32px;
+    }
+  }
+
   --marketplaceSelectStyles: {
     /* Dimensions */
     display: block;