Nice resize

pico.css

@@ -51,15 +51,26 @@ body {
     padding-left: var(--pad);
 }
 .videos {
+    display: inline-grid;
+    grid-auto-flow: column;
+    --gap: 1em;
+    grid-gap: var(--gap);
+    padding: var(--gap);
     overflow: hidden;
     resize: vertical;
-    height: 150px;
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-rows: 1fr;
+    height: 200px;
+}
+.video-container {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+}
+.video-meta {
+    position: absolute;
+    z-index: 999;
 }
 video {
-    background-color: black;
+    background-color: #eee;
     object-fit: cover;
     height: 100%;
     width: 100%;

pico.js

@@ -190,8 +190,10 @@ const Video = {
     view({attrs}) {
         const rpc = State.rpcs[attrs.username] || {iceConnectionState: m.trust(' ')}
         return m('.video-container',
-            m('.video-source', attrs.username),
-            m('.video-state', rpc.iceConnectionState),
+            m('.video-meta',
+                m('.video-source', attrs.username),
+                m('.video-state', rpc.iceConnectionState),
+            ),
             m('video.mirrored', {playsinline: true, oncreate: Video.appendStream(attrs)}),
         )
     },
@@ -242,14 +244,18 @@ const Media = {
     view() {
         if(!State.media[State.username]) {
             return m('.media',
-                m('button', {onclick: Media.turnOn}, 'turn on'),
-                m('select#media-source', Media.videoSources.map(option => m('option', option))),
-                m('label', m('input#mute-check', {type: 'checkbox'}), 'mute'),
+                m('.media-settings',
+                    m('button', {onclick: Media.turnOn}, 'turn on'),
+                    m('select#media-source', Media.videoSources.map(option => m('option', option))),
+                    m('label', m('input#mute-check', {type: 'checkbox'}), 'mute'),
+                ),
             )
         }
         else {
             return m('.media',
-                m('button', {onclick: Media.turnOff}, 'turn off'),
+                m('.media-settings',
+                    m('button', {onclick: Media.turnOff}, 'turn off'),
+                ),
                 m('.videos',
                     Object.entries(State.media).map(([username, stream]) =>
                         m(Video, {username, stream})