diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index ecb2bceb7..81093c666 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/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
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index d577f757d..07ec1ac97 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -3,7 +3,7 @@
{{ menuEntry.label }}
-
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 () {
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 9c71a8c83..fa9c71e5b 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/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
}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index bbecd8ba8..d637c94d9 100644
--- a/client/src/sass/application.scss
+++ b/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});
+ }
}
}
}