Make layout switch from horizontal layout to

vertical when the map is less than 50% of the
mapmlify container width.

Author: prushforth

src/script/main.js

@@ -180,7 +180,7 @@ loadBtn.addEventListener('click', async () => {
   const url = wmsUrlInput.value.trim();
 
   if (!url) {
-    alert('Please enter a WMS capabilities URL');
+    alert('Please enter a capabilities URL');
     return;
   }
 

src/style/main.css

@@ -139,6 +139,7 @@ button:active {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
+  flex-wrap: wrap;
 }
 
 .layer-controls {
@@ -149,8 +150,33 @@ button:active {
 }
 
 .layer-viewer-container {
-  flex: 1;
+  flex: 1 1 300px;
   min-height: 300px;
+  min-width: 300px;
+}
+
+/* 
+  Responsive layout: switch to vertical when viewer would be < 50% width
+  Breakpoint: 300px (controls) + 16px (gap) + 300px (min viewer) = 616px content
+  Plus padding/margins: ~776px viewport width
+*/
+@media (max-width: 800px) {
+  .layer-item {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .layer-controls {
+    flex: 1 1 auto;
+    min-width: 100%;
+    max-width: 100%;
+  }
+  
+  .layer-viewer-container {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 100%;
+  }
 }
 
 .layer-viewer-container mapml-viewer {