diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 9c5fa3a4883..82cbeccd76f 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -3719,7 +3719,6 @@ button.module-image__border-overlay:focus {
   }
 }
 .module-ongoing-call {
-  $local-preview-width: 108px;
   $local-preview-height: 80px;
 
   &__remote-video-enabled {
@@ -4216,7 +4215,7 @@ button.module-image__border-overlay:focus {
       margin-inline: 0 16px;
       overflow: hidden;
       position: relative;
-      width: $local-preview-width;
+      width: $calling-local-preview-width;
 
       &--active {
         box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 08469cd58c7..ab3cbcd92ef 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -259,6 +259,9 @@ $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 
 $calling-background-color: $color-gray-90;
 
+// Maintain aspect ratio 960x720 with $local-preview-height
+$calling-local-preview-width: 106.67px;
+
 // General
 
 $z-index-negative: -1;
diff --git a/stylesheets/components/CallControls.scss b/stylesheets/components/CallControls.scss
index 7140ac56567..e10c88ef1cd 100644
--- a/stylesheets/components/CallControls.scss
+++ b/stylesheets/components/CallControls.scss
@@ -111,9 +111,7 @@
 }
 
 .CallControls__OuterSpacer {
-  // Defined in _modules but duplicated here for ease of refactor
-  $local-preview-width: 108px;
-  flex-basis: calc($local-preview-width + 16px);
+  flex-basis: calc($calling-local-preview-width + 16px);
 }
 
 .CallControls__ReactionPickerContainer {