Merge branch 'livekit-experiment' into livekit-load-test

src/video-grid/VideoTile.module.css

@@ -18,12 +18,10 @@ limitations under the License.
   position: absolute;
   contain: strict;
   top: 0;
-  width: var(--tileWidth);
-  height: var(--tileHeight);
+  container-name: videoTile;
+  container-type: size;
   --tileRadius: 8px;
   border-radius: var(--tileRadius);
-  box-shadow: rgba(0, 0, 0, 0.5) 0px var(--tileShadow)
-    calc(2 * var(--tileShadow)) var(--tileShadowSpread);
   overflow: hidden;
   cursor: pointer;
 
@@ -195,3 +193,20 @@ limitations under the License.
     --tileRadius: 20px;
   }
 }
+
+/* CSS makes us put a condition here, even though all we want to do is
+unconditionally select the container so we can use cqmin units */
+@container videoTile (width > 0) {
+  .avatar {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /* To make avatars scale smoothly with their tiles during animations, we
+    override the styles set on the element */
+    --avatarSize: 50cqmin; /* Half of the smallest dimension of the tile */
+    width: var(--avatarSize) !important;
+    height: var(--avatarSize) !important;
+    border-radius: 10000px !important;
+  }
+}