new branding an dnow scroll prpotection

This commit is contained in:
Mark Gregory
2026-06-19 11:01:13 +01:00
parent 29ed273200
commit 6d97a98c02
6 changed files with 1198 additions and 7 deletions
+163
View File
@@ -1213,3 +1213,166 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active::after {
pointer-events: auto;
}
}
/*
|--------------------------------------------------------------------------
| WMS fixed sidebar / scrollable content correction
|--------------------------------------------------------------------------
|
| The application shell must own the viewport. The browser document must not
| scroll; only the right-hand WMS content pane should scroll. Keep this block
| at the end of the stylesheet so it wins over earlier shell declarations.
|
*/
html,
body {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden !important;
overscroll-behavior: none;
}
body {
position: fixed;
inset: 0;
}
.wms-app-shell {
position: fixed !important;
inset: 0 !important;
display: grid !important;
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr) !important;
width: 100vw !important;
height: 100vh !important;
min-width: 0 !important;
min-height: 0 !important;
max-height: 100vh !important;
overflow: hidden !important;
}
@supports (height: 100dvh) {
.wms-app-shell {
height: 100dvh !important;
max-height: 100dvh !important;
}
}
html[data-wms-sidebar="expanded"] .wms-app-shell {
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr) !important;
}
html[data-wms-sidebar="collapsed"] .wms-app-shell {
grid-template-columns: var(--wms-sidebar-collapsed-width) minmax(0, 1fr) !important;
}
.wms-sidebar {
position: relative !important;
display: flex !important;
flex-direction: column !important;
width: var(--wms-sidebar-width) !important;
min-width: var(--wms-sidebar-width) !important;
max-width: var(--wms-sidebar-width) !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
}
html[data-wms-sidebar="collapsed"] .wms-sidebar {
width: var(--wms-sidebar-collapsed-width) !important;
min-width: var(--wms-sidebar-collapsed-width) !important;
max-width: var(--wms-sidebar-collapsed-width) !important;
}
.wms-sidebar-header {
flex: 0 0 auto !important;
}
.wms-sidebar-nav {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.wms-main-panel {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
min-height: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
.wms-main-panel > header,
.wms-main-panel > .wms-topbar,
.wms-main-panel > [data-wms-topbar] {
position: relative !important;
top: auto !important;
flex: 0 0 auto !important;
min-height: 0 !important;
}
.wms-content {
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
min-height: 0 !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 1023px) {
.wms-app-shell {
display: block !important;
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
@supports (height: 100dvh) {
.wms-app-shell {
height: 100dvh !important;
max-height: 100dvh !important;
}
}
.wms-main-panel {
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
.wms-sidebar,
html[data-wms-sidebar="collapsed"] .wms-sidebar {
position: fixed !important;
inset: 0 auto 0 0 !important;
z-index: 70 !important;
width: min(88vw, 22rem) !important;
min-width: min(88vw, 22rem) !important;
max-width: min(88vw, 22rem) !important;
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
@supports (height: 100dvh) {
.wms-sidebar,
html[data-wms-sidebar="collapsed"] .wms-sidebar {
height: 100dvh !important;
max-height: 100dvh !important;
}
}
}