Full screen parts

pico.css

@@ -57,12 +57,12 @@ body {
 .videos {
     display: inline-grid;
     grid-auto-flow: column;
-    --gap: 1em;
-    grid-gap: var(--gap);
-    padding: var(--gap);
+    grid-gap: 3px;
+    justify-content: start;
     overflow: hidden;
-    resize: both;
+    resize: vertical;
     height: 200px;
+    width: 100%;
 }
 .video-container {
     background-color: lightsteelblue;
@@ -77,10 +77,12 @@ body {
 .video-option {
     display: block;
 }
+.video-container video {
+    position: absolute;
+}
 .video-container.square {
     height: 100%;
     width: var(--height);
-    overflow: hidden;
 }
 .video-container.square video {
     object-fit: cover;
@@ -90,6 +92,12 @@ body {
 .video-container.mirror video {
     transform: scaleX(-1);
 }
+.video-container.full-screen {
+    position: initial;
+}
+.video-container.full-screen video {
+    position: relative;
+}
 @media only screen and (min-width: 800px) {
     .chat {
         grid-template-areas:

pico.js

@@ -182,10 +182,10 @@ const hotKey = (e) => {
     }
 }
 const VideoOptions = {
-    available: ['mirror', 'square'],
+    available: ['mirror', 'square', 'full-screen'],
     getFor: (username) => {
         if(!State.options[username]) {
-            State.options[username] = new Set(VideoOptions.available)
+            State.options[username] = new Set(['mirror', 'square'])
         }
         return State.options[username]
     },