Refactor #882

assets/styles/layout/_news.scss

@@ -4,11 +4,16 @@
     left: 0;
     z-index: 1100;
     width: 100%;
+    height: 2rem;
+    padding: 0 2rem;
+
+    .layout-news-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
-    height: 2rem;
+        width: calc(100% - var(--scrollbar-width, 0px));
-    padding: 0 2rem;
+        height: 100%;
+    }
 
     .layout-news-content {
         flex: 1;

assets/styles/layout/_responsive.scss

@@ -101,6 +101,7 @@
 
     .blocked-scroll {
         overflow: hidden;
+        padding-right: var(--scrollbar-width);
     }
 }
 

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 {

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);
             }

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() {

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');
                 }
             }
         },

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) {

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: {

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) {

layouts/AppNews.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="layout-news" :style="$appState.announcement.backgroundStyle">
+        <div class="layout-news-container">
             <i></i>
             <div class="layout-news-content">
                 <span class="layout-news-text" :style="$appState.announcement.textStyle">{{ $appState.announcement.content }}</span>
@@ -9,6 +10,7 @@
                 <span class="pi pi-times"></span>
             </a>
         </div>
+    </div>
 </template>
 
 <script>

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;