Promote lobby scrolling fix to production

client/src/components/Lobby/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@mui/styles';
 import Paper from '@mui/material/Paper';
@@ -44,11 +44,14 @@
     flexDirection: 'column',
     flexGrow: 1,
     height: '100%',
+    minHeight: 0,
   },
   roomList: {
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
+    height: '100%',
+    minHeight: 0,
   },
   roomListContainer: {
     display: 'flex',
@@ -79,10 +82,12 @@
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
+    height: '100%',
   },
   flexGrow: {
     display: 'flex',
     flexGrow: 1,
+    minHeight: 0,
   },
   bottomNav: {
     width: '100%',
@@ -147,6 +152,7 @@
         >
           <div
             className={classes.roomListContainer}
+            data-testid="room-list-scroll-container"
           >
             <Container
               maxWidth="md"

client/src/components/Navigation.jsx

@@ -140,6 +140,7 @@ const useStyles = makeStyles((theme) => ({
   content: {
     display: 'flex',
     flexGrow: 1,
+    minHeight: 0,
     flexDirection: 'column',
   },
 }));

cypress/e2e/local_stack.cy.js

@@ -53,6 +53,25 @@ describe('local app stack', () => {
     });
   });
 
+  it('scrolls the room list when it exceeds the viewport', () => {
+    cy.viewport(800, 500);
+    cy.visit('/');
+
+    cy.get('[data-testid="room-list-scroll-container"]', { timeout: 10000 })
+      .then(($roomList) => {
+        const filler = $roomList[0].ownerDocument.createElement('div');
+        filler.style.flex = '0 0 1000px';
+        $roomList[0].appendChild(filler);
+      })
+      .should(($roomList) => {
+        expect($roomList[0].scrollHeight).to.be.greaterThan($roomList[0].clientHeight);
+      })
+      .scrollTo('bottom')
+      .should(($roomList) => {
+        expect($roomList[0].scrollTop).to.be.greaterThan(0);
+      });
+  });
+
   it('renders markdown announcements in the lobby', () => {
     cy.intercept('GET', '**/api/announcements', '[Docs](https://example.com)').as('announcements');