Fix inconsistent spacing on the sidebar. Scrolling only works when pointing at the world

macrovision.css

@@ -73,27 +73,30 @@ body.toggle-entity-name .entity-name {
 }
 
 #options {
+    min-width: 120pt;
     flex: 1 0 15vw;
     display: flex;
     justify-content: start;
     flex-direction: column;
     background: #444;
+    overflow-y: scroll;
 }
 
 .options-row {
     display: flex;
     text-align: center;
-    max-width: 15vw;
+    width: 100%;
 }
 
 .options-block {
     display: flex;
     text-align: center;
-    max-width: 15vw;
+    min-width: 100%;
     flex-direction: column;
 }
 
 @media (max-aspect-ratio: 1/1) {
+
     .options-row {
         flex-direction: column;
     }
@@ -263,4 +266,4 @@ body.toggle-bottom-name .bottom-name {
 
 #menubar button {
     font-size: 24pt;
-}
+}

macrovision.html

@@ -65,7 +65,7 @@
           Auto-sizing mode
         </div>
         <div class="options-row">
-          <select class="menu-item" id="options-world-autofit-mode">
+          <select id="options-world-autofit-mode">
             <option value="max">Max</option>
             <option value="arithmetic mean">Arithmetic mean</option>
             <option value="geometric mean">Geometric mean</option>

macrovision.js

@@ -723,7 +723,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     arrangeEntities(order);
     fitWorld();
-    window.addEventListener("wheel", e => {
+    document.querySelector("#world").addEventListener("wheel", e => {
 
 
         if (shiftHeld) {