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

@@ -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);
   }
 }
 

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) {