Add margin when main content is not expanded

2 files changed, 4 insertions, 2 deletions

diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index d05452367..0d655e85c 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -9,6 +9,7 @@ $black-background: #000;
 $grey-background: #f6f2f2;
 
 $expanded-horizontal-margins: 150px;
+$not-expanded-horizontal-margins: 30px;
 
 $button-height: 30px;
 
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index db63db5f5..5e401f93b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -52,8 +52,8 @@ input.readonly {
   }
 
   .margin-content {
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: $not-expanded-horizontal-margins;
+    margin-right: $not-expanded-horizontal-margins;
   }
 
   .sub-menu {
@@ -63,6 +63,7 @@ input.readonly {
     margin-bottom: 30px;
     display: flex;
     align-items: center;
+    padding-left: $not-expanded-horizontal-margins;
   }
 
   // Override some properties if the main content is expanded (no menu on the left)