From 4e73c07cb23d98050898f955bb73ba6fa752e0ce Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 30 Jan 2023 09:35:40 -0500
Subject: [PATCH] Try out scroll snapping

---
 src/room/InCallView.module.css         | 2 +-
 src/video-grid/NewVideoGrid.module.css | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index ef565731..896e1f99 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -17,7 +17,6 @@ limitations under the License.
 .inRoom {
   position: relative;
   display: flex;
-  gap: 8px;
   flex-direction: column;
   overflow: hidden;
   min-height: 100%;
@@ -41,6 +40,7 @@ limitations under the License.
 
 .footer {
   position: relative;
+  flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/video-grid/NewVideoGrid.module.css b/src/video-grid/NewVideoGrid.module.css
index dff0e871..c8e0d806 100644
--- a/src/video-grid/NewVideoGrid.module.css
+++ b/src/video-grid/NewVideoGrid.module.css
@@ -3,6 +3,7 @@
   flex-grow: 1;
   padding: 0 22px;
   overflow-y: auto;
+  scroll-snap-type: both mandatory;
 }
 
 .slotGrid {
@@ -14,4 +15,12 @@
 }
 
 .slot {
+  scroll-snap-align: start;
+}
+
+.slot:last-child {
+  /* This causes the grid to scroll up smoothly to the last item when its height
+  shrinks, and ensures that the user can always scroll the last row fully in
+  view */
+  scroll-snap-align: end;
 }