Fix menu dropdown overflow

Weird issue conflicting with the dropdown config from the menu component

2 files changed, 9 insertions, 14 deletions

diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 9b6b7cda5..8fa1de326 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,16 +1,16 @@
-import { ViewportScroller } from '@angular/common'
 import { HotkeysService } from 'angular2-hotkeys'
 import * as debug from 'debug'
 import { switchMap } from 'rxjs/operators'
+import { ViewportScroller } from '@angular/common'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
-import { scrollToTop } from '@app/helpers'
 import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
+import { scrollToTop } from '@app/helpers'
 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
-import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
-import { NgbDropdown, NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap'
 import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
 
 const logger = debug('peertube:menu:MenuComponent')
 
@@ -56,22 +56,17 @@ export class MenuComponent implements OnInit {
     private screenService: ScreenService,
     private menuService: MenuService,
     private modalService: PeertubeModalService,
-    private dropdownConfig: NgbDropdownConfig,
     private router: Router
-  ) {
-    this.dropdownConfig.container = 'body'
-  }
+  ) { }
 
   get isInMobileView () {
     return this.screenService.isInMobileView()
   }
 
   get dropdownContainer () {
-    if (this.isInMobileView) {
-      return null
-    } else {
-      return this.dropdownConfig.container
-    }
+    if (this.isInMobileView) return null
+
+    return 'body' as 'body'
   }
 
   get language () {
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index ee3346ea9..d884e75b2 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -4,7 +4,7 @@
     <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a>
 
     <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
-      #dropdown="ngbDropdown" autoClose="true">
+      #dropdown="ngbDropdown" autoClose="true" container="body">
       <span
         *ngIf="isInSmallView"
         tabindex=0