feat(web): layout

context/2026-09-21_06-32-00_style-editor-full-height.md

@@ -0,0 +1,3 @@
+# Редактор стилей на всю высоту
+
+У пользовательского стиля нет плашки пресета, поэтому в сетке `auto auto 1fr` карта стояла во второй `auto`-строке, а `1fr` снизу был пустой. Workspace — колонка flex, body `flex: 1`, shell `100dvh`. MapLibre слушает ResizeObserver.

web/src/design/components.css

@@ -1,6 +1,7 @@
 /* —— Layout shell —— */
 .app-shell {
   min-height: 100vh;
+  min-height: 100dvh;
   display: grid;
   grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
   grid-template-rows: auto 1fr;
@@ -53,6 +54,7 @@
   position: sticky;
   top: 44px;
   height: calc(100vh - 44px);
+  height: calc(100dvh - 44px);
   overflow: auto;
 }
 
@@ -112,10 +114,7 @@
 .app-shell__main {
   grid-area: main;
   min-width: 0;
-}
+  min-height: 0;
-
-.app-shell--workspace .app-shell__main {
-  overflow: hidden;
 }
 
 .page {

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;
+  display: flex;
-  grid-template-rows: auto auto 1fr;
+  flex-direction: column;
-  height: calc(100vh - 44px);
+  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;
   }