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

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 7cd5c3b46c3389bc6a5a0edbe87956448edf09c4..0b292850e26c131a50f4de832552ee84506ca9ce 100644 (file)
--- 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 2f8df81d40667f9f829fbc27f1e5b08c09219d89..5995bae4a114940ef4022f2f87db9cdfe11d1221 100644 (file)
--- 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 2b90cc8cf2a2e49cbb478ff3ac748a6d69f99100..e1a00fb8b725f3282c7ef53ca4544c99d674a6df 100644 (file)
--- 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 4f111efdf76bb326526a93a8bb9d95004dfa844c..d452a2b213e555a2668937ad0d6b3723d96bddb9 100644 (file)
--- 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 b992d0ebd3b1abba730ad81ec1ed1f7532898159..a5a4357269932401b818bf3324ed9c84272ab6ed 100644 (file)
--- 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 d5fec61e6aae7ebb541b96c861bcb2a4b8d11cd1..b86b94e8cc2300266b57754513262ba18265411a 100644 (file)
--- 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 d9dace16bd34da8a828d1adaef37b4c87421d135..f1b49a1e29aeb6abd9c34023059fb2544fce1aa5 100644 (file)
--- 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 89957704b319906cfd5a2ccd95e6f9bc0d28d69f..413f8c49dceb794b7e5b47fcb8b8382a6b7fd5ff 100644 (file)
--- 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;