refactor: mobile panel heights.

Author: knightedcodemonkey

src/styles/layout-shell.css

@@ -441,6 +441,8 @@
   }
 
   .app-grid {
+    --mobile-editor-max-height: clamp(280px, 42dvh, 520px);
+    --mobile-preview-max-height: clamp(320px, 52dvh, 680px);
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: auto auto auto;
     height: auto;
@@ -450,25 +452,35 @@
       'preview';
   }
 
-  .component-panel,
-  .styles-panel,
-  .preview-panel,
-  .app-grid--preview-right .component-panel,
-  .app-grid--preview-right .styles-panel,
-  .app-grid--preview-right .preview-panel,
-  .app-grid--preview-left .component-panel,
-  .app-grid--preview-left .styles-panel,
-  .app-grid--preview-left .preview-panel {
+  .app-grid :is(.component-panel, .styles-panel, .preview-panel) {
     height: auto;
-    min-height: var(--expanded-panel-min-height);
   }
 
-  .component-panel.panel--collapsed-horizontal,
-  .component-panel.panel--collapsed-vertical,
-  .styles-panel.panel--collapsed-horizontal,
-  .styles-panel.panel--collapsed-vertical,
-  .preview-panel.panel--collapsed-horizontal,
-  .preview-panel.panel--collapsed-vertical {
+  .app-grid :is(.component-panel, .styles-panel) {
+    min-height: min(var(--expanded-panel-min-height), var(--mobile-editor-max-height));
+    max-height: var(--mobile-editor-max-height);
+  }
+
+  .app-grid .preview-panel {
+    min-height: min(var(--expanded-panel-min-height), var(--mobile-preview-max-height));
+    max-height: var(--mobile-preview-max-height);
+  }
+
+  .app-grid :is(.component-panel, .styles-panel) .panel-content {
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .app-grid .preview-panel .panel-content {
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .app-grid
+    :is(.component-panel, .styles-panel, .preview-panel):is(
+      .panel--collapsed-horizontal,
+      .panel--collapsed-vertical
+    ) {
     min-height: 0;
   }
 

src/styles/panels-editor.css

@@ -391,7 +391,6 @@ textarea:focus {
 
   .component-panel,
   .styles-panel {
-    max-height: none;
-    min-height: 360px;
+    min-height: min(360px, var(--mobile-editor-max-height));
   }
 }