Add margin when main content is not expanded

3 files changed, 5 insertions, 3 deletions

diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html
index 9e9f688d2..c0a74cc47 100644
--- a/client/src/app/account/account-settings/account-settings.component.html
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -3,7 +3,7 @@
 
   <div class="user-info">
     <div class="user-info-username">{{ user.username }}</div>
-    <div class="user-info-followers">{{ user.account.followersCount }} subscribers</div>
+    <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
   </div>
 </div>
 
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)