From 14bd53c02b87b86b5459f6091ec8502f99ec36ba Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 25 Sep 2023 14:16:29 -0400
Subject: [PATCH] Fix the video grid getting clipped at the edges

And also, put the scroll bar in a more sensible spot by turning the footer into a proper sticky footer.
---
 src/room/InCallView.module.css         | 26 ++++++++++++--------------
 src/room/LobbyView.module.css          |  1 -
 src/video-grid/NewVideoGrid.module.css |  7 ++-----
 src/video-grid/VideoGrid.module.css    |  1 -
 4 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 588753ca..fa93c558 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -17,18 +17,18 @@ limitations under the License.
 .inRoom {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  min-height: 100%;
   height: 100%;
   width: 100%;
-  --footerPadding: var(--cpd-space-4x);
-  --footerHeight: calc(50px + 2 * var(--footerPadding));
 }
 
 .controlsOverlay {
   position: relative;
   flex: 1;
   display: flex;
+  flex-direction: column;
+  overflow: auto;
+  overflow-inline: hidden;
+  contain: strict;
 }
 
 .centerMessage {
@@ -45,17 +45,15 @@ limitations under the License.
 }
 
 .footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  box-sizing: border-box;
+  position: sticky;
+  inset-block-end: 0;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-areas: "logo buttons layout";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding: var(--footerPadding) var(--inline-content-inset);
+  padding-block: var(--cpd-space-4x);
+  padding-inline: var(--inline-content-inset);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -84,14 +82,14 @@ limitations under the License.
 }
 
 @media (min-height: 400px) {
-  .inRoom {
-    --footerPadding: var(--cpd-space-10x);
+  .footer {
+    padding-block: var(--cpd-space-10x);
   }
 }
 
 @media (min-height: 800px) {
-  .inRoom {
-    --footerPadding: var(--cpd-space-15x);
+  .footer {
+    padding-block: var(--cpd-space-15x);
   }
 }
 
diff --git a/src/room/LobbyView.module.css b/src/room/LobbyView.module.css
index 53ff796e..168ce69e 100644
--- a/src/room/LobbyView.module.css
+++ b/src/room/LobbyView.module.css
@@ -23,7 +23,6 @@ limitations under the License.
   flex: 1;
   overflow: hidden;
   height: 100%;
-  padding-block-end: var(--footerHeight);
 }
 
 @media (max-width: 500px) {
diff --git a/src/video-grid/NewVideoGrid.module.css b/src/video-grid/NewVideoGrid.module.css
index 5afff058..c579c897 100644
--- a/src/video-grid/NewVideoGrid.module.css
+++ b/src/video-grid/NewVideoGrid.module.css
@@ -15,14 +15,11 @@ limitations under the License.
 */
 
 .grid {
-  contain: strict;
+  contain: layout style;
   position: relative;
   flex-grow: 1;
   margin-inline: var(--inline-content-inset);
-  padding-block-end: var(--footerHeight);
-  margin-block-start: var(--cpd-space-4x);
-  overflow-y: auto;
-  overflow-x: hidden;
+  margin-block: var(--cpd-space-4x);
 }
 
 .slots {
diff --git a/src/video-grid/VideoGrid.module.css b/src/video-grid/VideoGrid.module.css
index 27fff2fc..df6e4fa7 100644
--- a/src/video-grid/VideoGrid.module.css
+++ b/src/video-grid/VideoGrid.module.css
@@ -19,5 +19,4 @@ limitations under the License.
   overflow: hidden;
   flex: 1;
   touch-action: none;
-  margin-bottom: var(--footerHeight);
 }