VIDCS-3463: On mobile, waiting room loading spinner is not present an…

…d horizontal scroll (#101)
Vonage · Feb 26, 2025 · 37245c9 · 37245c9
1 parent 160a3f8
commit 37245c9
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/frontend/src/components/WaitingRoom/ControlPanel/ControlPanel.tsx b/frontend/src/components/WaitingRoom/ControlPanel/ControlPanel.tsx
@@ -71,7 +71,7 @@ const ControlPanel = ({
   };
 
   return (
-    <div className="m-auto my-4" data-testid="ControlPanel">
+    <div className="m-auto my-4 max-w-[100dvw]" data-testid="ControlPanel">
       <div className="flex flex-row justify-evenly min-[400px]:w-[400px]">
         <Button
           sx={buttonSx}

diff --git a/frontend/src/components/WaitingRoom/VideoContainer/VideoContainer.tsx b/frontend/src/components/WaitingRoom/VideoContainer/VideoContainer.tsx
@@ -60,7 +60,7 @@ const VideoContainer = ({ username }: VideoContainerProps): ReactElement => {
 
   return (
     <div
-      className="relative flex w-[584px] max-w-full flex-col items-center justify-center bg-black sm:h-[328px] md:rounded-xl"
+      className="relative flex aspect-video w-[584px] max-w-full flex-col items-center justify-center bg-black sm:h-[328px] md:rounded-xl"
       // this was added because overflow: hidden causes issues with rendering
       // see https://stackoverflow.com/questions/77748631/element-rounded-corners-leaking-out-to-front-when-using-overflow-hidden
       style={{ WebkitMask: 'linear-gradient(#000 0 0)' }}