fix: editor content being hidden under keyboard on mobile (#1410)

packages/web/src/stylesheets/_columns.scss

@@ -21,7 +21,6 @@
       flex-grow: 1;
 
       .content {
-        height: 100%;
         overflow-y: auto;
       }
     }

packages/web/src/stylesheets/_editor.scss

@@ -9,6 +9,7 @@ $heading-height: 75px;
 .section.editor {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
   overflow-y: hidden;
   background-color: var(--editor-background-color);
   color: var(--editor-foreground-color);
@@ -95,8 +96,6 @@ $heading-height: 75px;
 .editor-content,
 #editor-content {
   flex: 1;
-  overflow-y: hidden;
-  height: 100%;
   display: flex;
   tab-size: 2;
   background-color: var(--editor-pane-background-color);

packages/web/src/stylesheets/_main.scss

@@ -41,8 +41,6 @@ body {
   -moz-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  min-height: 100%;
-  height: 100%;
   line-height: normal;
   margin: 0;
 }
@@ -107,16 +105,30 @@ p {
   margin: 0;
 }
 
+html,
+body,
+.main-ui-view {
+  height: max-content;
+  min-height: 0;
+  max-height: none;
+
+  display: block;
+
+  @media screen and (min-width: 768px) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .main-ui-view {
-  // Fallbacks
-  min-height: 100vh;
-  height: 100vh;
-  // Mobile-corrected viewport height
-  min-height: var(--viewport-height);
-  height: var(--viewport-height);
   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;
@@ -139,8 +151,6 @@ $footer-height: 2rem;
 
   .section {
     padding-bottom: 0px;
-    height: 100%;
-    max-height: calc(100vh - #{$footer-height});
     position: relative;
     overflow: hidden;