Merge pull request #260 from coder13/dev

Promote lobby scrolling fix to production

Release the viewport-bounded lobby layout after reviewed dev candidate validation.

Author: coder13

client/src/components/Lobby/index.jsx

@@ -44,11 +44,14 @@ const useStyles = makeStyles((theme) => ({
     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 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
+    height: '100%',
   },
   flexGrow: {
     display: 'flex',
     flexGrow: 1,
+    minHeight: 0,
   },
   bottomNav: {
     width: '100%',
@@ -147,6 +152,7 @@ function Lobby({
         >
           <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');