Atempting to properly sort out the layout

No longer using the entire window for layout decisions has caused a number of
problems. Attempting to solve them by porting some of the layout logic from
the old player. Also shuffled the CSS a bit to make related things
be displayed together.

multiplayer.js

@@ -8,6 +8,10 @@
 
 :host {
     display: block;
+    container: player-root / size;
+    width: 100%;
+    aspect-ratio: 64 / 27;
+
     --background: black;
     --background-other: rgba(255,255,255,0.15);
     --backdrop: rgba(0, 0, 0, 0.7);
@@ -29,6 +33,11 @@
 
     --range-size: calc(var(--gap) * 2);
     --range-corner: var(--gap);
+
+    --main-width: 75cqw;
+    --main-height: 100cqh;
+    --secondary-width: calc(25cqw - var(--gap));
+    --secondary-height: calc((100cqh - var(--gap) * 2) / 3);
 }
 
 svg {
@@ -57,21 +66,13 @@ button {
     margin: 0;
     padding: 0;
     height: 100%;
- /* min-height: 250px; */
     width: 100%;
- /* min-width: 550px; */
     background-color: var(--background);
     color: var(--foreground);
     font-family: var(--font);
     display: grid;
     overflow: hidden;
     position: relative;
-    container: player-root / size;
-}
-
-#title {
-    grid-area: title;
-    z-index: 2;
 }
 
 #viewport {
@@ -80,9 +81,61 @@ button {
     z-index: 1;
     grid-auto-rows: minmax(0, 1fr);
     grid-auto-columns: minmax(0, 1fr);
+    place-items: stretch;
+}
+
+/** video streams **/
+
+.stream {
+    display: grid;
+    position: relative;
+    grid-column-start: 4;
+    place-items: stretch;
+}
+.stream.main {
+    grid-row: 1 / 4;
+    grid-column: 1 / 4;
+}
+.stream.main:only-child {
+    grid-row: auto;
+    grid-column: auto;
+}
+.stream > video {
+    grid-row: 1 / 4;
+    grid-column: 1 / 4;
+    max-width: var(--secondary-width);
+    max-height: var(--secondary-height);
+}
+.stream.main > video {
+    max-width: var(--main-width);
+    max-height: var(--main-height);
+}
+.stream.main:only-child > video {
+    max-width: 100cqw;
     max-height: 100cqh;
 }
 
+@container player-root (max-aspect-ratio: 1.85) {
+    /*
+    the tall layout for narrow screens
+    */
+    * {
+        --main-width: 100cqw;
+        --main-height: 75cqh;
+        --secondary-width: calc((100cqw - var(--gap) * 2) / 3);
+        --secondary-height: calc(25cqh - var(--gap));
+    }
+    .stream {
+        grid-column: auto;
+    }
+}
+
+.stream > svg {
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    place-self: center;
+}
+
 /** about box **/
 
 #sidebar {
@@ -99,6 +152,10 @@ button {
     z-index: 2;
     overflow-y: hidden;
 }
+#title {
+    grid-area: title;
+    z-index: 2;
+}
 #sidebar.open {
     height: calc(100% - var(--controls-height));
 }
@@ -254,6 +311,16 @@ button {
 #loading-overlay > svg {
     height: 50%;
 }
+
+@container player-root (width < 450px) {
+    :root {
+        aspect-ratio: 4 / 3;
+    }
+    #of, #duration {
+        display: none;
+    }
+}
+
 .select {
     position: relative;
     user-select: none;
@@ -296,49 +363,6 @@ button {
     padding: 0 var(--gap);
 }
 
-/** video streams **/
-
-video {
-    max-height: 100%;
-    max-width: 100%;
-}
-.stream {
-    display: grid;
-    position: relative;
-    grid-column-start: 4;
-    place-items: stretch;
-}
-.stream.main {
-    grid-row: 1 / 4;
-    grid-column: 1 / 4;
-}
-
-@container player-root (max-aspect-ratio: 1.85) {
-    /*
-    this is the aspect ratio when the vertical
-    stacking starts/stops fitting in the container
-    */
-    .stream {
-        grid-column: auto;
-    }
-    .stream.main {
-        grid-row: 2 / 5;
-    }
-}
-@container player-root (width < 450px) {
-    #of, #duration {
-        display: none;
-    }
-}
-.stream > video {
-    grid-row: 1 / 4;
-    grid-column: 1 / 4;
-}
-.stream > svg {
-    grid-row: 2 / 3;
-    grid-column: 2 / 3;
-    place-self: center;
-}
 .fade {
     opacity: 0;
 }