fix(mobile): increase font sizes and other mobile-centric improvements (#1907)

packages/web/src/stylesheets/_main.scss

@@ -137,11 +137,6 @@ body,
   position: relative;
   overflow: auto;
   background-color: var(--editor-header-bar-background-color);
-
-  @media screen and (min-width: 768px) {
-    min-height: 100vh;
-    height: 100vh;
-  }
 }
 
 $footer-height: 2rem;

packages/web/src/stylesheets/_navigation.scss

@@ -24,9 +24,6 @@ $content-horizontal-padding: 16px;
 
   .no-tags-placeholder {
     padding: 0px $content-horizontal-padding;
-    font-size: 12px;
-    opacity: 0.4;
-    margin-top: -5px;
   }
 
   .root-drop {
@@ -68,10 +65,19 @@ $content-horizontal-padding: 16px;
     }
 
     > .tag-info {
+      align-items: center;
       display: flex;
       flex-direction: row;
-      align-items: center;
       justify-content: space-between;
+      min-height: 35px;
+
+      @media screen and (min-width: 768px) {
+        min-height: 31px;
+      }
+
+      @media screen and (min-width: 1024px) {
+        min-height: 29.5px;
+      }
 
       .sn-icon {
         display: block;
@@ -93,9 +99,6 @@ $content-horizontal-padding: 16px;
       }
 
       > .title {
-        font-size: 14px;
-        line-height: 18px;
-
         width: 80%;
         background-color: transparent;
         font-weight: 600;

packages/web/src/stylesheets/_reach-sub.scss

@@ -9,7 +9,7 @@
 }
 
 [data-reach-dialog-overlay]::before {
-  background-color: var(--sn-stylekit-contrast-background-color);
+  background-color: var(--sn-stylekit-passive-color-5);
   content: '';
   position: fixed;
   top: 0px;
@@ -19,10 +19,6 @@
   opacity: 0.75;
 }
 
-.challenge-modal-overlay::before {
-  background-color: var(--sn-stylekit-passive-color-5);
-}
-
 [data-reach-dialog-content] {
   position: relative;
 }