From 0ae303fbe9121560bab0e5617248bb6901758504 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Mon, 17 Feb 2020 10:16:34 -0500
Subject: [PATCH] Fix inconsistent spacing on the sidebar. Scrolling only works
 when pointing at the world

---
 macrovision.css  | 9 ++++++---
 macrovision.html | 2 +-
 macrovision.js   | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/macrovision.css b/macrovision.css
index 55042490..aea51b7c 100644
--- a/macrovision.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/macrovision.html b/macrovision.html
index 7774bf31..6bc8aee3 100644
--- a/macrovision.html
+++ b/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>
diff --git a/macrovision.js b/macrovision.js
index ac6c03b8..57df293e 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -723,7 +723,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     arrangeEntities(order);
     fitWorld();
-    window.addEventListener("wheel", e => {
+    document.querySelector("#world").addEventListener("wheel", e => {
 
 
         if (shiftHeld) {