Make the sidebar move to the top in portrait mode

Still very rough around the edges...

macrovision.css

@@ -78,19 +78,36 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     display: flex;
     flex: 1 1 90vh;
     width: 100%;
-    flex-direction: row;
+}
+
+@media (max-aspect-ratio: 1/1) {
+    #main-area {
+        flex-direction: column;    
+    }
+
+    #options {
+        flex: 1 1 25vh;
+        flex-direction: row;
+        overflow-x: auto;
+        overflow-y: auto;
+    }
+}
+
+@media (min-aspect-ratio: 1/1) {
+    #options {
+        flex: 1 1 15vw;
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
 }
 
 #options {
     position: relative;
-    flex: 1 1 15vw;
     min-width: 140pt;
     display: flex;
     justify-content: start;
-    flex-direction: column;
     background: #444;
-    overflow-x: hidden;
-    overflow-y: auto;
     height: 100%;
     scrollbar-color: #e1e1e1 #888;
 }
@@ -143,8 +160,38 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
 
 .options-category {
     position: relative;
+    flex: 1 1 15vw;
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    max-height: 100%;
+    align-content: flex-start;
+}
+
+/* options-view needs this for..some reason */
+
+@media (min-aspect-ratio: 1/1) {
+
+#options-entity,
+#options-view {
+    width: 100%;
+}
+
+}
+/* column-order flexboxes don't grow to contain their contents,
+so we have to do this and set the width via JS */
+
+@media (max-aspect-ratio: 1/1) {
+    .options-category {
+        min-width: var(--calc-width);
+    }
+    .options-category  * {
+        max-width: 250px !important;
+    }
 }
 
+
+
 .options-row {
     position: relative;
     flex-direction: column;
@@ -155,13 +202,12 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     margin-right: auto;
     margin-top: 8px;
     margin-bottom: 8px;
-    max-width: 90%;
+    max-width: 200px;
 }
 
 .options-block {
     display: flex;
     text-align: center;
-    min-width: 90%;
     width: 90%;
     margin: auto;
     flex-direction: column;
@@ -219,9 +265,19 @@ body.show-extra-options .options-block.options-block-optional {
     height: 100%;
 }
 
+@media (max-aspect-ratio: 1/1) {
+    #world {
+        flex: 1 1 85vh;
+    }
+}
+
+@media (min-aspect-ratio: 1/1) {
+    #world {
+        flex: 1 1 85vw;
+    }
+}
 #world {
     position: relative;
-    flex: 1 1 85vw;
     height: 100%;
     overflow: hidden;
 }

macrovision.html

@@ -158,19 +158,21 @@
         <div class="options-label">
           View
         </div>
-        <select class="options-selector" id="entity-view"></select>
+        <div class="options-row">
+          <select class="options-selector" id="entity-view"></select>
+        </div>
         <div class="options-label">
           Sizes
         </div>
         <div class="options-block" id="options-entity-defaults">
         </div>
-        <span id="options-entity">
-        </span>
+        <div id="options-entity">
+        </div>
       </div>
       <h3 class="options-header" id="view-category-header">View options</h3>
       <div class="options-category" id="view-category">
-        <span id="options-view">
-        </span>
+        <div id="options-view">
+        </div>
       </div>
       <h3 class="options-header" id="attribution-category-header" >Attribution</h3>
       <span id="options-attribution">

macrovision.js

@@ -473,7 +473,7 @@ function configEntityOptions(entity, view) {
     const holder = document.querySelector("#options-entity");
     
     document.querySelector("#entity-category-header").style.display = "block";
-    document.querySelector("#entity-category").style.display = "block";
+    document.querySelector("#entity-category").style.display = "inline-flex";
 
     holder.innerHTML = "";
 
@@ -555,7 +555,9 @@ function configEntityOptions(entity, view) {
     });
 
     document.querySelector("#options-order-display").innerText = entity.priority;
-    document.querySelector("#options-ordering").style.display = "flex";
+    document.querySelector("#options-ordering").style.display = "inline-flex";
+    
+    updateOptionsBoxes();
 }
 
 function updateEntityOptions(entity, view) {
@@ -563,6 +565,8 @@ function updateEntityOptions(entity, view) {
     setNumericInput(scaleInput, entity.scale);
 
     document.querySelector("#options-order-display").innerText = entity.priority;
+
+    updateOptionsBoxes();
 }
 
 function clearEntityOptions() {
@@ -582,7 +586,7 @@ function configViewOptions(entity, view) {
     const holder = document.querySelector("#options-view");
     
     document.querySelector("#view-category-header").style.display = "block";
-    document.querySelector("#view-category").style.display = "block";
+    document.querySelector("#view-category").style.display = "inline-flex";
 
     holder.innerHTML = "";
 
@@ -656,6 +660,8 @@ function configViewOptions(entity, view) {
         row.appendChild(select);
     });
 
+    updateOptionsBoxes();
+
 }
 
 function updateViewOptions(entity, view, changed) {
@@ -670,6 +676,8 @@ function updateViewOptions(entity, view, changed) {
         }
 
     });
+
+    updateOptionsBoxes();
 }
 
 function setNumericInput(input, value, round=3) {
@@ -1040,11 +1048,23 @@ function toggleFullScreen() {
     }
   }
 
+function updateOptionsBoxes() {
+    document.querySelectorAll(".options-category").forEach(category => {
+        console.log(category)
+        console.log(category.lastElementChild)
+        console.log(category.getBoundingClientRect().x)
+        console.log(category.lastElementChild.getBoundingClientRect().x)
+        
+        category.style.setProperty("--calc-width", category.lastElementChild.getBoundingClientRect().x + category.lastElementChild.getBoundingClientRect().width - category.getBoundingClientRect().x + "px");
+        console.log(category.style.minWidth)
+    })
+}
 function handleResize() {
     entityX = document.querySelector("#entities").getBoundingClientRect().x;
     canvasWidth = document.querySelector("#display").clientWidth - 100;
     canvasHeight = document.querySelector("#display").clientHeight - 50;
     updateSizes();
+    updateOptionsBoxes();
 }
 
 function prepareMenu() {