Refactor horizontal margins

3 files changed, 21 insertions, 25 deletions

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 457a7151c..426263444 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -178,32 +178,20 @@ $play-overlay-width: 18px;
 
 // Use margin by default, or padding if $margin is false
 @mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
+  --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)};
+
   @if $margin {
-    margin-left: $not-expanded-horizontal-margins !important;
-    margin-right: $not-expanded-horizontal-margins !important;
+    margin-left: var(--fluidVideosMiniatureMargins) !important;
+    margin-right: var(--fluidVideosMiniatureMargins) !important;
   } @else {
-    padding-left: $not-expanded-horizontal-margins !important;
-    padding-right: $not-expanded-horizontal-margins !important;
+    padding-left: var(--fluidVideosMiniatureMargins) !important;
+    padding-right: var(--fluidVideosMiniatureMargins) !important;
   }
 
   @media screen and (max-width: $mobile-view) {
-    width: auto;
+    --fluidVideosMiniatureMargins: $min-margin;
 
-    @if $margin {
-      margin: $min-margin !important;
-    } @else {
-      padding: $min-margin !important;
-    }
-  }
-
-  @media screen and (min-width: #{breakpoint(fhd)}) {
-    @if $margin {
-      margin-left: 6vw !important;
-      margin-right: 6vw !important;
-    } @else {
-      padding-left: 6vw !important;
-      padding-right: 6vw !important;
-    }
+    width: auto;
   }
 }
 
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b3190a4e3..58920ce36 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -856,7 +856,7 @@
   }
 }
 
-@mixin admin-sub-header-responsive ($horizontal-margins) {
+@mixin admin-sub-header-responsive {
   flex-direction: column;
 
   .form-sub-title {
@@ -871,7 +871,7 @@
     white-space: nowrap;
     height: 50px;
     padding: 10px 0;
-    width: calc(100vw - #{$horizontal-margins*2});
+    width: 100%;
 
     a {
       margin-left: 5px;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 532eaf650..8c5e75864 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -34,7 +34,7 @@ $green: #39CC0B;
 $grey-actor-name: #777272;
 
 $expanded-horizontal-margins: 150px;
-$not-expanded-horizontal-margins: 30px;
+$not-expanded-horizontal-margins: 60px;
 
 $button-height: 30px;
 
@@ -122,11 +122,19 @@ $variables: (
   --supportButtonHeartColor: var(--supportButtonHeartColor),
 
   --embedForegroundColor: var(--embedForegroundColor),
-  --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
+  --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
+
+  --horizontalMarginContent: var(--horizontalMarginContent),
+  --mainColWidth: var(--mainColWidth)
 );
 
+// SASS type check our CSS variables
 @function pvar($variable) {
-  @return map-get($variables, $variable);
+  @if map-has-key($variables, $variable) {
+    @return map-get($variables, $variable);
+  } @else {
+    @error "ERROR: Variable #{$variable} does not exist";
+  }
 }
 
 /*** z-index groups ***/