Call Controls: Enhance width for viewport sizes

stylesheets/_modules.scss

@@ -3708,7 +3708,7 @@ button.module-image__border-overlay:focus {
 }
 
 .module-ongoing-call {
-  $local-preview-width: 107px;
+  $local-preview-width: 108px;
   $local-preview-height: 80px;
 
   &__remote-video-enabled {
@@ -4013,18 +4013,10 @@ button.module-image__border-overlay:focus {
       justify-content: center;
     }
 
-    // This layout-only element is not ideal, but lets us keep the actions centered until
-    //   until they'd overlap with the video, at which point they start to move.
-    &__local-preview-offset {
-      flex: 1 0;
-      max-width: $local-preview-width;
-      margin-inline-start: 16px;
-      visibility: hidden;
-    }
-
     &__local-preview {
       border-radius: 10px;
       display: flex;
+      flex-shrink: 0;
       height: $local-preview-height;
       margin-block-end: 16px;
       margin-inline: 0 16px;

stylesheets/components/CallControls.scss

@@ -5,17 +5,18 @@
   position: relative;
   bottom: 0;
   display: flex;
-  flex-grow: 0;
+  flex-grow: 1;
   flex-shrink: 0;
+  flex-basis: 440px;
   align-items: center;
   justify-content: space-between;
-  width: 480px;
-  min-width: 480px;
+  max-width: 600px;
   height: 80px;
   background-color: $color-gray-78;
   box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
   border-radius: 18px;
   margin-block-end: 16px;
+  margin-inline: 16px;
   padding-block: 22px;
   padding-inline: 24px;
   text-align: center;
@@ -31,6 +32,7 @@
 .CallControls__CallTitle {
   display: flex;
   max-height: 40px;
+  margin-block-end: 2px;
   color: $color-gray-15;
   font-size: 14px;
   font-weight: bold;
@@ -107,3 +109,9 @@
 .CallControls__JoinLeaveButton .module-spinner__container {
   margin-block: -5px;
 }
+
+.CallControls__OuterSpacer {
+  // Defined in _modules but duplicated here for ease of refactor
+  $local-preview-width: 108px;
+  flex-basis: calc($local-preview-width + 16px);
+}

stylesheets/components/CallingLobby.scss

@@ -35,6 +35,8 @@
   }
 }
 
-.module-CallingLobby__CallControls-spacer {
-  flex-basis: 70px;
+.CallingLobby__Footer {
+  display: flex;
+  width: 100%;
+  justify-content: center;
 }

ts/components/CallScreen.tsx

@@ -518,9 +518,7 @@ export function CallScreen({
       {remoteParticipantsElement}
       {lonelyInCallNode}
       <div className="module-ongoing-call__footer">
-        {/* This layout-only element is not ideal.
-            See the comment in _modules.css for more. */}
-        <div className="module-ongoing-call__footer__local-preview-offset" />
+        <div className="module-calling__spacer CallControls__OuterSpacer" />
         <div
           className={classNames(
             'CallControls',

ts/components/CallingLobby.tsx

@@ -277,50 +277,54 @@ export function CallingLobby({
           {i18n('icu:calling__your-video-is-off')}
         </div>
 
-        <div className="module-calling__spacer module-CallingLobby__CallControls-spacer" />
-
-        <div className="CallControls">
-          <div className="CallControls__InfoDisplay">
-            <div className="CallControls__CallTitle">{conversation.title}</div>
-            <div className="CallControls__Status">{callStatus}</div>
-          </div>
-          <CallingButtonToastsContainer
-            hasLocalAudio={hasLocalAudio}
-            outgoingRing={outgoingRing}
-            i18n={i18n}
-          />
-          <div className="CallControls__ButtonContainer">
-            <CallingButton
-              buttonType={videoButtonType}
-              i18n={i18n}
-              onClick={toggleVideo}
-              tooltipDirection={TooltipPlacement.Top}
-            />
-            <CallingButton
-              buttonType={audioButtonType}
-              i18n={i18n}
-              onClick={toggleAudio}
-              tooltipDirection={TooltipPlacement.Top}
-            />
-            <CallingButton
-              buttonType={ringButtonType}
-              i18n={i18n}
-              isVisible={isRingButtonVisible}
-              onClick={toggleOutgoingRing}
-              tooltipDirection={TooltipPlacement.Top}
-            />
-          </div>
-          <div className="CallControls__JoinLeaveButtonContainer">
-            <CallingLobbyJoinButton
-              disabled={!canJoin}
-              i18n={i18n}
-              onClick={() => {
-                setIsCallConnecting(true);
-                onJoinCall();
-              }}
-              variant={callingLobbyJoinButtonVariant}
-            />
+        <div className="CallingLobby__Footer">
+          <div className="module-calling__spacer CallControls__OuterSpacer" />
+          <div className="CallControls">
+            <div className="CallControls__InfoDisplay">
+              <div className="CallControls__CallTitle">
+                {conversation.title}
+              </div>
+              <div className="CallControls__Status">{callStatus}</div>
+            </div>
+            <CallingButtonToastsContainer
+              hasLocalAudio={hasLocalAudio}
+              outgoingRing={outgoingRing}
+              i18n={i18n}
+            />
+            <div className="CallControls__ButtonContainer">
+              <CallingButton
+                buttonType={videoButtonType}
+                i18n={i18n}
+                onClick={toggleVideo}
+                tooltipDirection={TooltipPlacement.Top}
+              />
+              <CallingButton
+                buttonType={audioButtonType}
+                i18n={i18n}
+                onClick={toggleAudio}
+                tooltipDirection={TooltipPlacement.Top}
+              />
+              <CallingButton
+                buttonType={ringButtonType}
+                i18n={i18n}
+                isVisible={isRingButtonVisible}
+                onClick={toggleOutgoingRing}
+                tooltipDirection={TooltipPlacement.Top}
+              />
+            </div>
+            <div className="CallControls__JoinLeaveButtonContainer">
+              <CallingLobbyJoinButton
+                disabled={!canJoin}
+                i18n={i18n}
+                onClick={() => {
+                  setIsCallConnecting(true);
+                  onJoinCall();
+                }}
+                variant={callingLobbyJoinButtonVariant}
+              />
+            </div>
           </div>
+          <div className="module-calling__spacer CallControls__OuterSpacer" />
         </div>
       </div>
     </FocusTrap>