Merge pull request #3889 from element-hq/multiple-screen-shares

Fix visual glitches with multiple screen shares

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 {

src/tile/SpotlightTile.module.css

@@ -153,10 +153,10 @@ Please see LICENSE in the repository root for full details.
 }
 
 @media (hover) {
-  .tile > div > button {
+  .tile button {
     opacity: 0;
   }
-  .tile:hover > div > button {
+  .tile:hover button {
     opacity: 1;
   }
 }