Add basic mobile styling

src/room/PTTCallView.jsx

@@ -11,6 +11,8 @@ import { Facepile } from "../Facepile";
 import { PTTButton } from "./PTTButton";
 import { PTTFeed } from "./PTTFeed";
 import { useMediaHandler } from "../settings/useMediaHandler";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
 
 export function PTTCallView({
   groupCall,
@@ -31,9 +33,11 @@ export function PTTCallView({
   const { modalState: settingsModalState, modalProps: settingsModalProps } =
     useModalTriggerState();
   const { audioOutput } = useMediaHandler();
+  const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver });
+  const facepileSize = bounds.width < 800 ? "sm" : "md";
 
   return (
-    <div className={styles.pttCallView}>
+    <div className={styles.pttCallView} ref={containerRef}>
       <Header className={styles.header}>
         <LeftNav>
           <RoomSetupHeaderInfo roomName={roomName} onPress={onLeave} />
@@ -46,18 +50,24 @@ export function PTTCallView({
             participants.length > 1 ? "people" : "person"
           } connected`}</p>
           <Facepile
-            size="md"
+            size={facepileSize}
             max={8}
             className={styles.facepile}
             client={client}
             participants={participants}
           />
         </div>
-        <div className={styles.talkingInfo}>
-          <h2>Talking...</h2>
-          <p>00:01:24</p>
+        <div className={styles.footer}>
+          <SettingsButton onPress={() => settingsModalState.open()} />
+          <HangupButton onPress={onLeave} />
+          <InviteButton onPress={() => inviteModalState.open()} />
         </div>
+
         <div className={styles.pttButtonContainer}>
+          <div className={styles.talkingInfo}>
+            <h2>Talking...</h2>
+            <p>00:01:24</p>
+          </div>
           <PTTButton
             client={client}
             activeSpeaker={activeSpeaker}
@@ -72,11 +82,6 @@ export function PTTCallView({
             />
           ))}
         </div>
-        <div className={styles.footer}>
-          <SettingsButton onPress={() => settingsModalState.open()} />
-          <HangupButton onPress={onLeave} />
-          <InviteButton onPress={() => inviteModalState.open()} />
-        </div>
       </div>
 
       {settingsModalState.isOpen && (

src/room/PTTCallView.module.css

@@ -16,20 +16,12 @@
   flex: 1;
   flex-direction: column;
   align-items: center;
-  margin-top: 48px;
-}
-
-.actionTip {
-  margin-top: 42px;
-  margin-bottom: 45px;
-  font-size: 17px;
 }
 
 .participants {
   display: flex;
   flex-direction: column;
   margin: 20px;
-  margin-bottom: 67px;
 }
 
 .participants > p {
@@ -45,21 +37,29 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 38px;
+  margin-bottom: 20px;
 }
 
 .pttButtonContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex: 1;
+  justify-content: center;
+}
+
+.actionTip {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 17px;
 }
 
 .footer {
   position: relative;
   display: flex;
   justify-content: center;
-  align-items: center;
   height: 64px;
+  margin-bottom: 20px;
 }
 
 .footer > * {
@@ -68,4 +68,34 @@
 
 .footer > :last-child {
   margin-right: 0px;
+}
+
+@media (min-width: 800px) {
+  .participants {
+    margin-bottom: 67px;
+  }
+
+  .talkingInfo {
+    margin-bottom: 38px;
+  }
+
+  .center {
+    margin-top: 48px;
+  }
+
+  .actionTip {
+    margin-top: 42px;
+    margin-bottom: 45px;
+  }
+
+  .pttButtonContainer {
+    flex: auto;
+    margin-bottom: 0;
+    justify-content: flex-start;
+  }
+
+  .footer {
+    flex: auto;
+    order: 4;
+  }
 }