From bffc5d743c3cbceac41afcbf5554f34a762e33d0 Mon Sep 17 00:00:00 2001
From: "vl.arkhangelskii" <vl.arkhangelskii@megapolis-it.ru>
Date: Mon, 21 Sep 2026 06:41:14 +0300
Subject: [PATCH] feat(web): layout

---
 ...09-21_06-32-00_style-editor-full-height.md |  3 ++
 web/src/design/components.css                 |  7 ++---
 web/src/features/styles/LiveMap.tsx           |  5 ++++
 web/src/features/styles/editor.css            | 28 +++++++++++++++----
 4 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 context/2026-09-21_06-32-00_style-editor-full-height.md

diff --git a/context/2026-09-21_06-32-00_style-editor-full-height.md b/context/2026-09-21_06-32-00_style-editor-full-height.md
new file mode 100644
index 0000000..e02529e
--- /dev/null
+++ b/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.
diff --git a/web/src/design/components.css b/web/src/design/components.css
index ad0a759..c19b195 100644
--- a/web/src/design/components.css
+++ b/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;
-}
-
-.app-shell--workspace .app-shell__main {
-  overflow: hidden;
+  min-height: 0;
 }
 
 .page {
diff --git a/web/src/features/styles/LiveMap.tsx b/web/src/features/styles/LiveMap.tsx
index d7183e8..cc66c4b 100644
--- a/web/src/features/styles/LiveMap.tsx
+++ b/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;
     };
diff --git a/web/src/features/styles/editor.css b/web/src/features/styles/editor.css
index 673334c..a42443c 100644
--- a/web/src/features/styles/editor.css
+++ b/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;
   }