Significant mobile changes

The viewport attribute is now set, which should make mobile devices show it a bit
more correctly. I updated the bottom-names to be placed properly on mobile.

macrovision.css

@@ -2,12 +2,15 @@
 
 html {
     height: 100%;
+    width: 100%;
+    box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: hidden;
     color: #eee;
 }
 
 body {
+    position: relative;
     background: #333;
     display: flex;
     flex-direction: column;
@@ -80,8 +83,8 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
 
 #options {
     position: relative;
-    min-width: 200pt;
-    flex: 1 0 15vw;
+    flex: 1 1 15vw;
+    min-width: 140pt;
     display: flex;
     justify-content: start;
     flex-direction: column;
@@ -211,7 +214,7 @@ body.show-extra-options .options-block.options-block-optional {
 
 #world {
     position: relative;
-    flex: 1 0 85vw;
+    flex: 1 1 85vw;
     height: 100%;
     overflow: hidden;
 }
@@ -351,7 +354,8 @@ body.toggle-top-name .top-name.top-name-needed {
     position: fixed;
     width: 150px;
     height: 50px;
-    transform: translate(-50%, 20pt);
+    z-index: 349539534;
+    transform: translate(-50%, 0pt);
 }
 
 body.toggle-bottom-name .bottom-name {
@@ -360,7 +364,7 @@ body.toggle-bottom-name .bottom-name {
 
 #menubar select {
     max-width: 200pt;
-    height: 60pt;
+    height: 40pt;
     max-height: 180pt;
     overflow: hidden;
     white-space: pre-wrap;
@@ -387,7 +391,7 @@ body.toggle-bottom-name .bottom-name {
 }
 
 #menubar button {
-    font-size: 48pt;
+    font-size: 36pt;
 }
 
 #help {
@@ -592,10 +596,16 @@ body.toggle-bottom-cover .bottom-cover {
 .transitions {
     transition: 0.2s all;
 }
+
 .rotate-forward {
     transform: rotate(-90deg);
 }
 
 .rotate-backward {
     transform: rotate(90deg);
+}
+
+i.fas
+i.far {
+    pointer-events: none;
 }

macrovision.html

@@ -19,6 +19,7 @@
   <script src="presets/scenes.js"></script>
   <script src="media/attribution.js"></script>
   <script src="macrovision.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75, user-scalable=0"/>
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="How big are they anyway?" />
   <meta property="og:title" content="Macrovision" />

macrovision.js

@@ -131,7 +131,7 @@ function updateEntityElement(entity, element) {
     const bottomName = document.querySelector("#bottom-name-" + element.dataset.key);
 
     bottomName.style.left = position.x + entityX + "px";
-    bottomName.style.top = "95vh";
+    bottomName.style.bottom = "0vh";
     bottomName.innerText = entity.name;
 
     const topName = document.querySelector("#top-name-" + element.dataset.key);
@@ -1000,6 +1000,14 @@ function toggleFullScreen() {
     }
   }
 
+function handleResize() {
+    entityX = document.querySelector("#entities").getBoundingClientRect().x;
+    console.log(entityX)
+    canvasWidth = document.querySelector("#display").clientWidth - 100;
+    canvasHeight = document.querySelector("#display").clientHeight - 50;
+    updateSizes();
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     prepareEntities();
 
@@ -1009,13 +1017,12 @@ document.addEventListener("DOMContentLoaded", () => {
             sidebar.classList.remove("hidden");
             e.target.classList.remove("rotate-forward");
             e.target.classList.add("rotate-backward");
-            updateSizes();
         } else {
             sidebar.classList.add("hidden");
             e.target.classList.add("rotate-forward");
             e.target.classList.remove("rotate-backward");
-            updateSizes();
         }
+        handleResize();
     });
 
     document.querySelector("#menu-fullscreen").addEventListener("click", toggleFullScreen);
@@ -1341,6 +1348,16 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
 
+    
+    window.addEventListener("resize", handleResize);
+
+    // TODO: further investigate why the tool initially starts out with wrong
+    // values under certain circumstances (seems to be narrow aspect ratios -
+    // maybe the menu bar is animating when it shouldn't)
+
+    setTimeout(handleResize, 250);
+
+
     document.querySelector("#menu-permalink").addEventListener("click", e => {
         linkScene();
     });
@@ -1429,27 +1446,6 @@ function prepareEntities() {
     });
 }
 
-window.addEventListener("resize", () => {
-    entityX = document.querySelector("#entities").getBoundingClientRect().x;
-    console.log(entityX)
-    canvasWidth = document.querySelector("#display").clientWidth - 100;
-    canvasHeight = document.querySelector("#display").clientHeight - 50;
-    updateSizes();
-})
-
-// TODO: further investigate why the tool initially starts out with wrong
-// values under certain circumstances (seems to be narrow aspect ratios -
-// maybe the menu bar is animating when it shouldn't)
-
-setTimeout(() => {
-    
-    entityX = document.querySelector("#entities").getBoundingClientRect().x;
-    console.log(entityX)
-    canvasWidth = document.querySelector("#display").clientWidth - 100;
-    canvasHeight = document.querySelector("#display").clientHeight - 50;
-    updateSizes();
-}, 250);
-
 document.addEventListener("mousemove", (e) => {
     if (clicked) {
         const position = snapRel(abs2rel({ x: e.clientX - dragOffsetX, y: e.clientY - dragOffsetY }));