diff --git a/assets/styles/layout/_news.scss b/assets/styles/layout/_news.scss index 4abaa8031..f96b193fc 100644 --- a/assets/styles/layout/_news.scss +++ b/assets/styles/layout/_news.scss @@ -4,12 +4,17 @@ left: 0; z-index: 1100; width: 100%; - display: flex; - justify-content: space-between; - align-items: center; height: 2rem; padding: 0 2rem; + .layout-news-container { + display: flex; + justify-content: space-between; + align-items: center; + width: calc(100% - var(--scrollbar-width, 0px)); + height: 100%; + } + .layout-news-content { flex: 1; display: flex; diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss index f00f628ca..82d84e78d 100644 --- a/assets/styles/layout/_responsive.scss +++ b/assets/styles/layout/_responsive.scss @@ -101,6 +101,7 @@ .blocked-scroll { overflow: hidden; + padding-right: var(--scrollbar-width); } } diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index 1b24ae875..f4675160c 100644 --- a/assets/styles/layout/_topbar.scss +++ b/assets/styles/layout/_topbar.scss @@ -9,11 +9,12 @@ transition: background-color 1s; .layout-topbar-inner { - height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 4rem; + height: 100%; + width: calc(100% - var(--scrollbar-width, 0px)); } &.layout-topbar-sticky { diff --git a/components/lib/blockui/BlockUI.vue b/components/lib/blockui/BlockUI.vue index d66837be6..1dfb4d8c7 100755 --- a/components/lib/blockui/BlockUI.vue +++ b/components/lib/blockui/BlockUI.vue @@ -51,6 +51,7 @@ export default { document.body.appendChild(this.mask); DomHandler.addClass(document.body, 'p-overflow-hidden'); + document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); document.activeElement.blur(); } else { this.mask = DomHandler.createElement('div', { @@ -92,6 +93,7 @@ export default { if (this.fullScreen) { document.body.removeChild(this.mask); DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.style.removeProperty('--scrollbar-width'); } else { this.$refs.container.removeChild(this.mask); } diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue index 70bf05f62..aeaf70ab6 100755 --- a/components/lib/calendar/Calendar.vue +++ b/components/lib/calendar/Calendar.vue @@ -1649,6 +1649,7 @@ export default { document.body.appendChild(this.mask); DomHandler.addClass(document.body, 'p-overflow-hidden'); + document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); } }, disableModality() { @@ -1683,6 +1684,7 @@ export default { if (!hasBlockerMasks) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.style.removeProperty('--scrollbar-width'); } }, updateCurrentMetaData() { diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue index 84204b83d..5d3e3ed87 100755 --- a/components/lib/dialog/Dialog.vue +++ b/components/lib/dialog/Dialog.vue @@ -205,8 +205,10 @@ export default { if (!this.modal) { if (this.maximized) { DomHandler.addClass(document.body, 'p-overflow-hidden'); + document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); } else { DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.style.removeProperty('--scrollbar-width'); } } }, diff --git a/components/lib/galleria/Galleria.vue b/components/lib/galleria/Galleria.vue index 348163442..d8aaa4675 100755 --- a/components/lib/galleria/Galleria.vue +++ b/components/lib/galleria/Galleria.vue @@ -36,6 +36,7 @@ export default { beforeUnmount() { if (this.fullScreen) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.style.removeProperty('--scrollbar-width'); } this.mask = null; @@ -52,6 +53,7 @@ export default { onEnter(el) { this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); DomHandler.addClass(document.body, 'p-overflow-hidden'); + document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); this.focus(); }, onBeforeLeave() { @@ -61,6 +63,7 @@ export default { ZIndexUtils.clear(el); this.containerVisible = false; DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.style.removeProperty('--scrollbar-width'); }, onActiveItemChange(index) { if (this.activeIndex !== index) { diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue index 50816b8a9..e5c6f0a8c 100644 --- a/components/lib/image/Image.vue +++ b/components/lib/image/Image.vue @@ -94,6 +94,7 @@ export default { onImageClick() { if (this.preview) { DomHandler.addClass(document.body, 'p-overflow-hidden'); + document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); this.maskVisible = true; setTimeout(() => { this.previewVisible = true; @@ -164,6 +165,7 @@ export default { }, onLeave() { DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.style.removeProperty('--scrollbar-width'); this.$emit('hide'); }, onAfterLeave(el) { @@ -182,6 +184,7 @@ export default { this.rotate = 0; this.scale = 1; DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.style.removeProperty('--scrollbar-width'); } }, computed: { diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue index 3babd17bc..638e89b11 100755 --- a/components/lib/sidebar/Sidebar.vue +++ b/components/lib/sidebar/Sidebar.vue @@ -125,6 +125,7 @@ export default { if (this.blockScroll) { DomHandler.addClass(document.body, 'p-overflow-hidden'); + document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); } }, disableDocumentSettings() { @@ -132,6 +133,7 @@ export default { if (this.blockScroll) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.style.removeProperty('--scrollbar-width'); } }, onKeydown(event) { diff --git a/layouts/AppNews.vue b/layouts/AppNews.vue index d63804142..e73db526f 100644 --- a/layouts/AppNews.vue +++ b/layouts/AppNews.vue @@ -1,13 +1,15 @@ diff --git a/layouts/default.vue b/layouts/default.vue index 2ee355ba8..fb52a02f2 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -43,6 +43,7 @@ export default { this.sidebarActive = false; DomHandler.removeClass(document.body, 'blocked-scroll'); + document.body.style.removeProperty('--scrollbar-width'); this.$toast.removeAllGroups(); } } @@ -61,14 +62,17 @@ export default { if (this.sidebarActive) { this.sidebarActive = false; DomHandler.removeClass(document.body, 'blocked-scroll'); + document.body.style.removeProperty('--scrollbar-width'); } else { this.sidebarActive = true; DomHandler.addClass(document.body, 'blocked-scroll'); + document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px'); } }, onMaskClick() { this.sidebarActive = false; DomHandler.removeClass(document.body, 'blocked-scroll'); + document.body.style.removeProperty('--scrollbar-width'); }, hideNews(event) { this.$appState.newsActive = false;