Fix margins/widths with top-menu and main-col on small screens

8 files changed, 23 insertions, 8 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 7cd5c3b46..0b292850e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -15,8 +15,13 @@
   }
 
   & > div {
+    padding: 10px;
     width: 350px;
 
+    &:nth-child(2) {
+      max-width: 60px !important;
+    }
+
     @media screen and (max-width: $small-view) {
       width: auto;
 
@@ -25,9 +30,4 @@
       }
     }
   }
-
-  & > div {
-    padding: 10px
-  }
 }
-
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index 2f8df81d4..5995bae4a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -25,6 +25,7 @@ input[type=submit] {
 
 textarea {
   @include peertube-textarea(500px, 150px);
+  max-width: 100%;
 
   display: block;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 2b90cc8cf..e1a00fb8b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -16,4 +16,5 @@
 
 .progress {
   width: 500px;
+  max-width: 100%;
 }
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 4f111efdf..d452a2b21 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,3 +1,10 @@
+
+
 .row {
   flex-direction: column;
+  width: 100%;
+
+  & > my-top-menu-dropdown:nth-child(1) {
+    flex-grow: 1;
+  }
 }
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html
index b992d0ebd..a5a435726 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.html
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html
@@ -5,7 +5,7 @@
     <div class="actor-img-edit-container">
       <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body">
         <my-global-icon iconName="edit"></my-global-icon>
-        <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
+        <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
       </div>
     </div>
 
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index d5fec61e6..b86b94e8c 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -22,7 +22,7 @@
   <div class="sub-header-container">
     <my-menu *ngIf="menu.isMenuDisplayed"></my-menu>
 
-    <div id="content" tabindex="-1" class="main-col container-fluid" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
+    <div id="content" tabindex="-1" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
 
       <div class="main-row">
         <router-outlet></router-outlet>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index d9dace16b..f1b49a1e2 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -8,6 +8,7 @@
 .sub-header-container {
   margin-top: $header-height;
   background-color: var(--mainBackgroundColor);
+  width: 100%;
 }
 
 .header {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 89957704b..413f8c49d 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -106,9 +106,13 @@ label {
   color: black;
 }
 
+.row {
+  margin: 0;
+}
+
 .main-col {
   margin-left: $menu-width;
-  width: auto;
+  width: calc(100% - #{$menu-width});
 
   .margin-content {
     margin-left: $not-expanded-horizontal-margins;
@@ -130,6 +134,7 @@ label {
   // Override some properties if the main content is expanded (no menu on the left)
   &.expanded {
     margin-left: 0;
+    width: 100%;
 
     .margin-content {
       margin-left: $expanded-horizontal-margins;