fix: improve small-device drawer layout

index.html

@@ -25,13 +25,14 @@
           <span aria-hidden="true">×</span>
           <span class="visually-hidden">Close map controls</span>
         </button>
-        <div class="brand">
+        <div class="sidebar-content">
-          <h1>
+          <div class="brand">
-            <img class="brand-logo" src="./assets/brand/xpro-logo-simple.svg" alt="XPro" />
+            <h1>
-            <span class="visually-hidden">XPro</span>
+              <img class="brand-logo" src="./assets/brand/xpro-logo-simple.svg" alt="XPro" />
-          </h1>
+              <span class="visually-hidden">XPro</span>
-          <p class="brand-subtitle">Map Visualizer</p>
+            </h1>
-        </div>
+            <p class="brand-subtitle">Map Visualizer</p>
+          </div>
 
         <section class="panel">
           <div class="panel-heading">
@@ -77,6 +78,7 @@
             </select>
           </label>
         </section>
+        </div>
       </aside>
 
       <main class="map-wrap">

styles.css

@@ -49,13 +49,23 @@ body {
   width: min(266px, calc(100vw - 48px));
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  overflow: hidden;
-  overflow-y: auto;
   padding: 8px;
   transition: transform 240ms ease;
   backdrop-filter: blur(3px);
 }
 
+.sidebar-content {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
 .sidebar-toggle {
   position: fixed;
   z-index: 11;
@@ -89,8 +99,8 @@ body {
 
 .sidebar-close {
   position: absolute;
-  top: 18px;
+  top: 14px;
-  right: 18px;
+  right: 14px;
 }
 
 .sidebar-close span[aria-hidden="true"] {
@@ -117,7 +127,7 @@ body {
 }
 
 .brand {
-  padding: 24px;
+  padding: 24px 64px 24px 24px;
 }
 
 .brand-logo {
@@ -635,6 +645,73 @@ button:disabled {
     width: min(266px, calc(100vw - 32px));
   }
 
+  .sidebar-content {
+    gap: 10px;
+    padding-right: 2px;
+  }
+
+  .sidebar-close {
+    top: 12px;
+    right: 12px;
+  }
+
+  .brand {
+    padding: 16px 58px 14px 16px;
+    border-radius: 18px;
+  }
+
+  .brand-logo {
+    width: min(100%, 136px);
+  }
+
+  .brand-subtitle {
+    margin-top: 4px;
+    font-size: 0.85rem;
+  }
+
+  .panel {
+    padding: 14px;
+    border-radius: 18px;
+  }
+
+  .panel-heading {
+    gap: 8px;
+  }
+
+  .parcel-search-form,
+  .background-selector,
+  .layer-list {
+    margin-top: 10px;
+  }
+
+  .parcel-search-form {
+    gap: 8px;
+  }
+
+  .status {
+    margin-top: 8px;
+    font-size: 0.9rem;
+  }
+
+  input,
+  select {
+    padding: 10px 12px;
+  }
+
+  button {
+    padding: 11px 14px;
+  }
+
+  .layer-list {
+    gap: 8px;
+  }
+
+  .layer-item {
+    gap: 10px;
+    padding: 10px;
+    border-radius: 14px;
+  }
+
   .sidebar-open {
     top: 24px;
     left: 24px;
@@ -644,3 +721,30 @@ button:disabled {
     transform: translateX(calc(-100% - 16px));
   }
 }
+
+@media (max-width: 920px) and (max-height: 700px) {
+  .sidebar-content {
+    gap: 8px;
+  }
+
+  .brand {
+    padding-top: 12px;
+    padding-bottom: 10px;
+  }
+
+  .brand-logo {
+    width: min(100%, 112px);
+  }
+
+  .brand-subtitle {
+    display: none;
+  }
+
+  .panel {
+    padding: 12px;
+  }
+
+  .panel h2 {
+    font-size: 1.1rem;
+  }
+}