Fix playlist layout on mobile

2 files changed, 14 insertions, 13 deletions

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index 3f2c345d2..4531e475a 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -4,10 +4,10 @@
 
 .playlist-info {
   background-color: pvar(--submenuColor);
-  margin-left: -15px;
+  margin-left: -$not-expanded-horizontal-margins;
   margin-top: -$sub-menu-margin-bottom;
 
-  padding: $sub-menu-margin-bottom 0 -15px 0;
+  padding: 10px;
 
   display: flex;
   justify-content: center;
@@ -45,7 +45,9 @@
 
 @media screen and (max-width: $small-view) {
   .playlist-info {
-    margin-top: -$sub-menu-margin-bottom-small-view;
+    width: 100vw;
+    padding-top: 20px;
+    margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
   }
 }
 
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9668da39d..cdf0ee992 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -52,6 +52,8 @@ body {
 
   --activatedActionButtonColor: #{$activated-action-button-color};
 
+  --expanded-horizontal-margin-content: $expanded-horizontal-margins;
+
   font-family: $main-fonts;
   font-weight: $font-regular;
   color: pvar(--mainForegroundColor);
@@ -162,13 +164,13 @@ label {
     width: 100%;
 
     .margin-content {
-      margin-left: $expanded-horizontal-margins;
-      margin-right: $expanded-horizontal-margins;
+      margin-left: var(--expanded-horizontal-margin-content);
+      margin-right: var(--expanded-horizontal-margin-content);
     }
 
     .sub-menu {
-      padding-left: $expanded-horizontal-margins;
-      padding-right: $expanded-horizontal-margins;
+      padding-left: var(--expanded-horizontal-margin-content);
+      padding-right: var(--expanded-horizontal-margin-content);
     }
   }
 
@@ -304,8 +306,7 @@ table {
   .main-col {
     &.expanded {
       .margin-content {
-        margin-left: $expanded-horizontal-margins/2;
-        margin-right: $expanded-horizontal-margins/2;
+        --expanded-horizontal-margin-content: $expanded-horizontal-margins/2;
       }
     }
   }
@@ -316,8 +317,7 @@ table {
   .main-col {
     &, &.expanded {
       .margin-content {
-        margin-left: $expanded-horizontal-margins/3;
-        margin-right: $expanded-horizontal-margins/3;
+        --expanded-horizontal-margin-content: $expanded-horizontal-margins/3;
       }
 
       .sub-menu {
@@ -344,8 +344,7 @@ table {
 
     &, &.expanded {
       .margin-content {
-        margin-left: 15px;
-        margin-right: 15px;
+        --expanded-horizontal-margin-content: 15px;
       }
 
       .sub-menu {