Fix regression my-account menu overflow-x on screen width < 800px (#2707)

* Fix: correct my-account menu overflow-x on touchscreens

* Add menuLeftDisplayed support for account-sub-menu

* Handle menu in screen service + clean top-menu-dropdown

* Add comment on menuWidth menu service to allow backtracking

Co-authored-by: Rigel Kent <par@rigelk.eu>

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <par@rigelk.eu>

client/src/app/core/menu/menu.service.ts

@@ -7,6 +7,7 @@ import { debounceTime } from 'rxjs/operators'
 export class MenuService {
   isMenuDisplayed = true
   isMenuChangedByUser = false
+  menuWidth = 240  // should be kept equal to $menu-width
 
   constructor (
     private screenService: ScreenService

client/src/app/shared/menu/top-menu-dropdown.component.html

@@ -3,7 +3,7 @@
 
     <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
 
-    <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry"
+    <div *ngIf="!menuEntry.routerLink" ngbDropdown container="body" class="parent-entry"
       #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
       <span
         *ngIf="isInSmallView"

client/src/app/shared/menu/top-menu-dropdown.component.ts

@@ -11,6 +11,7 @@ import { Subscription } from 'rxjs'
 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { GlobalIconName } from '@app/shared/images/global-icon.component'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { MenuService } from '@app/core/menu'
 
 export type TopMenuDropdownParam = {
   label: string
@@ -36,7 +37,6 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
 
   suffixLabels: { [ parentLabel: string ]: string }
   hasIcons = false
-  container: undefined | 'body' = undefined
   isModalOpened = false
   currentMenuEntryIndex: number
 
@@ -46,11 +46,17 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   constructor (
     private router: Router,
     private modalService: NgbModal,
-    private screen: ScreenService
+    private screen: ScreenService,
+    private menuService: MenuService
   ) { }
 
   get isInSmallView () {
-    return this.screen.isInSmallView()
+    let marginLeft = 0
+    if (this.menuService.isMenuDisplayed) {
+      marginLeft = this.menuService.menuWidth
+    }
+
+    return this.screen.isInSmallView(marginLeft)
   }
 
   ngOnInit () {
@@ -63,11 +69,6 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     this.hasIcons = this.menuEntries.some(
       e => e.children && e.children.some(c => !!c.iconName)
     )
-
-    // We have to set body for the container to avoid scroll overflow on mobile and small views
-    if (this.isInSmallView) {
-      this.container = 'body'
-    }
   }
 
   ngOnDestroy () {

client/src/app/shared/misc/screen.service.ts

@@ -10,7 +10,12 @@ export class ScreenService {
     this.refreshWindowInnerWidth()
   }
 
-  isInSmallView () {
+  isInSmallView (marginLeft = 0) {
+    if (marginLeft > 0) {
+      const contentWidth = this.getWindowInnerWidth() - marginLeft
+      return contentWidth < 800
+    }
+
     return this.getWindowInnerWidth() < 800
   }
 

client/src/sass/application.scss

@@ -320,6 +320,7 @@ table {
         padding-left: 15px;
         padding-right: 15px;
         margin-bottom: $sub-menu-margin-bottom-small-view;
+        overflow-x: auto;
       }
 
       .admin-sub-header {
@@ -388,6 +389,11 @@ table {
       .admin-sub-header {
         @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
       }
+
+      .sub-menu {
+        overflow-x: auto;
+        width: calc(100vw - #{$menu-width});
+      }
     }
   }
 }