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;
+  max-width: 600px;
-  min-width: 480px;
   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 {
+.CallingLobby__Footer {
-  flex-basis: 70px;
+  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.
+        <div className="module-calling__spacer CallControls__OuterSpacer" />
-            See the comment in _modules.css for more. */}
-        <div className="module-ongoing-call__footer__local-preview-offset" />
         <div
           className={classNames(
             'CallControls',

ts/components/CallingLobby.tsx

@@ -277,11 +277,13 @@ export function CallingLobby({
           {i18n('icu:calling__your-video-is-off')}
         </div>
 
-        <div className="module-calling__spacer module-CallingLobby__CallControls-spacer" />
+        <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__CallTitle">
+                {conversation.title}
+              </div>
               <div className="CallControls__Status">{callStatus}</div>
             </div>
             <CallingButtonToastsContainer
@@ -322,6 +324,8 @@ export function CallingLobby({
               />
             </div>
           </div>
+          <div className="module-calling__spacer CallControls__OuterSpacer" />
+        </div>
       </div>
     </FocusTrap>
   );