Fix CSS to work within 16:9 constrained container - replace viewport units with relative units

src/styles.css

@@ -28,6 +28,7 @@ html, body {
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
+  min-height: auto;
 }
 
 #app > * {
@@ -41,6 +42,9 @@ html, body {
   /* Ensure it doesn't overflow */
   min-width: 0;
   min-height: 0;
+  /* Contain everything inside */
+  display: flex;
+  flex-direction: column;
 }
 
 /* When in fullscreen, use full viewport */
@@ -51,16 +55,6 @@ html, body {
   padding: 0;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  background: transparent;
-}
-
 button,
 input,
 select {
@@ -84,10 +78,6 @@ button {
   cursor: pointer;
 }
 
-#app {
-  min-height: 100vh;
-}
-
 .layout {
   width: 100%;
   height: 100%;
@@ -234,7 +224,7 @@ label span,
   position: relative;
   width: 100%;
   height: auto;
-  max-height: calc(100vh - 10.5rem);
+  max-height: 100%;
   aspect-ratio: var(--board-columns) / var(--board-rows);
   display: grid;
   gap: 0.32rem;
@@ -290,8 +280,8 @@ label span,
 }
 
 .cell__node {
-  width: min(2.5vw, 1.6rem);
+  width: min(1.5em, 1.6rem);
-  height: min(2.5vw, 1.6rem);
+  height: min(1.5em, 1.6rem);
   min-width: 1rem;
   min-height: 1rem;
   border-radius: 50%;
@@ -482,7 +472,7 @@ label span,
 
 .modal {
   width: min(1180px, 100%);
-  max-height: min(92vh, 980px);
+  max-height: min(92%, 980px);
   overflow: auto;
 }
 
@@ -490,9 +480,9 @@ label span,
   position: fixed;
   top: 1rem;
   right: 1rem;
-  width: max(320px, calc(((100vw - 2rem) - 0.85rem) * 0.3091));
+  width: max(320px, 30%);
-  max-width: calc(100vw - 2rem);
+  max-width: calc(100% - 2rem);
-  max-height: calc(100vh - 9.5rem);
+  max-height: calc(100% - 9.5rem);
   overflow: auto;
   z-index: 24;
   border-color: rgba(255, 255, 255, 0.12);
@@ -816,7 +806,7 @@ button:disabled {
 .log-list {
   display: grid;
   gap: 0.55rem;
-  max-height: 18vh;
+  max-height: 30%;
   overflow: auto;
 }