feat(web): layout

web/src/features/styles/LiveMap.tsx

@@ -44,7 +44,12 @@ export function LiveMap({ style, bindings, selectedLayerId, lastEdit, styleEpoch
       }
     });
     mapRef.current = map;
+    const resize = () => map.resize();
+    map.on("load", resize);
+    const observer = new ResizeObserver(resize);
+    observer.observe(el.current);
     return () => {
+      observer.disconnect();
       map.remove();
       mapRef.current = null;
     };

web/src/features/styles/editor.css

@@ -1,11 +1,20 @@
+.app-shell--workspace {
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
+}
+
 .app-shell--workspace .app-shell__main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   overflow: hidden;
 }
 
 .style-workspace {
-  display: grid;
-  grid-template-rows: auto auto 1fr;
-  height: calc(100vh - 44px);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   min-height: 0;
   background: var(--grouped-background);
 }
@@ -16,6 +25,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
+  flex-shrink: 0;
   min-height: 52px;
   padding: 0 var(--gutter);
   border-bottom: var(--hairline) solid var(--separator);
@@ -105,6 +115,7 @@
 .style-workspace__flash,
 .style-workspace__note {
   margin: 0;
+  flex-shrink: 0;
   padding: var(--space-2) var(--gutter);
   font-size: var(--text-footnote);
   color: var(--secondary-label);
@@ -114,6 +125,7 @@
 .style-workspace__body {
   display: grid;
   grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(240px, 300px);
+  flex: 1;
   min-height: 0;
 }
 
@@ -317,12 +329,18 @@
 }
 
 @media (max-width: 1100px) {
-  .style-workspace {
+  .app-shell--workspace {
     height: auto;
-    min-height: calc(100vh - 44px);
+    max-height: none;
+    overflow: visible;
+  }
+
+  .style-workspace {
+    min-height: calc(100dvh - 44px);
   }
 
   .style-workspace__body {
+    flex: none;
     grid-template-columns: 1fr;
     grid-template-rows: 48vh auto auto;
   }