Fix menu dropdowns

Better responsive
Avoid menu scrollbar displayed in notification popove

4 files changed, 6 insertions, 11 deletions

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 0786b953b..8b90fb78b 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,7 +5,7 @@
         <div>
           <div
             class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
-            [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
+            container="body" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
           >
             <button class="border-0 text-start" ngbDropdownToggle>
               <my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 4b1ed65ce..d88025c33 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -114,7 +114,7 @@ my-notification {
         display: inherit !important;
       }
 
-      > .dropdown-toggle {
+      &.dropdown-toggle {
         max-width: 88% !important;
       }
     }
@@ -144,7 +144,7 @@ my-notification {
     /* fill space when on mobile */
     max-width: calc(100% - 80px);
 
-    .dropdown-toggle {
+    &.dropdown-toggle {
       max-width: 100%;
     }
 
@@ -171,7 +171,8 @@ my-notification {
   > .dropdown-toggle:first-child {
     display: flex;
     align-items: center;
-    padding: 5px 7px;
+    width: 100%;
+    padding: 5px 25px 5px 7px;
   }
 }
 
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 896c824b8..410abe6fa 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -86,12 +86,6 @@ export class MenuComponent implements OnInit, OnDestroy {
     return this.screenService.isInMobileView()
   }
 
-  get dropdownContainer () {
-    if (this.isInMobileView) return null
-
-    return 'body' as 'body'
-  }
-
   get language () {
     return this.languageChooserModal.getCurrentLanguage()
   }
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index 907828efb..921d7643f 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -4,7 +4,7 @@
 </ng-template>
 
 <button
-  [ngbPopover]="popContent" autoClose="outside" placement="bottom" container={this} popoverClass="popover-notifications"
+  [ngbPopover]="popContent" autoClose="outside" placement="bottom" container="body" popoverClass="popover-notifications"
   i18n-title title="View your notifications"
   class="border-0 text-start" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
   #popover="ngbPopover" (shown)="onPopoverShown()" (hidden)="onPopoverHidden()"