Fix name tags appearing in the wrong place with multiple screen shares

They were not properly being contained to where the MediaView is supposed to appear, causing them to all stack up on the first screen share in the spotlight tile.

src/tile/MediaView.module.css

@@ -11,6 +11,9 @@ Please see LICENSE in the repository root for full details.
   border-radius: var(--media-view-border-radius);
   /*Add spacing for the hover boarder. Otherwise it might get clipped.*/
   margin: var(--hover-space-margin);
+  display: grid;
+  grid-template-areas: "content";
+  place-items: stretch;
 }
 
 .media video {
@@ -37,6 +40,7 @@ Please see LICENSE in the repository root for full details.
 }
 
 .bg {
+  grid-area: content;
   background-color: var(--video-tile-background);
   inline-size: 100%;
   block-size: 100%;
@@ -75,18 +79,19 @@ unconditionally select the container so we can use cqmin units */
 }
 
 .fg {
-  position: absolute;
+  grid-area: content;
   --fg-inset: var(
     --media-view-fg-inset,
     calc(var(--media-view-border-radius) - var(--cpd-space-3x))
   );
-  inset: var(--fg-inset);
+  padding: var(--fg-inset);
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: 1fr auto;
   grid-template-areas: "status reactions" "nameTag button";
   gap: var(--cpd-space-1x);
   place-items: start;
+  contain: strict;
 }
 
 .nameTag {