fix: Re-enable scroll lock (#3003)

Fixes stickied elements disappearing from viewport when dialogs or
drawers are open due to hacky fix for QA dialogs.

Author: SuaYoo

frontend/src/pages/org/archived-item-qa/archived-item-qa.ts

@@ -338,6 +338,18 @@ export class ArchivedItemQA extends BtrixElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    if (
+      changedProperties.has("crawlData") &&
+      this.crawlData?.replayUrl &&
+      this.crawlData.replayUrl !==
+        (changedProperties.get("crawlData") as QATypes.ReplayData | undefined)
+          ?.replayUrl
+    ) {
+      this.showReplayPageLoadingDialog();
+    }
+  }
+
   private async initItem() {
     void this.fetchCrawl();
     await this.fetchQARuns();
@@ -1038,6 +1050,8 @@ export class ArchivedItemQA extends BtrixElement {
     return html`
       <div
         class="replayContainer ${tw`h-full min-h-96 [contain:paint] lg:min-h-0`}"
+        @sl-show=${this.disableScrollLock}
+        @sl-after-hide=${this.enableScrollLock}
       >
         <div
           class=${tw`relative h-full overflow-hidden rounded-b-lg border-x border-b bg-slate-100 p-4 shadow-inner`}
@@ -1111,7 +1125,6 @@ export class ArchivedItemQA extends BtrixElement {
         </div>
         <btrix-dialog
           class="loadingPageDialog"
-          ?open=${this.tab === "replay"}
           no-header
           @sl-request-close=${(e: SlRequestCloseEvent) => e.preventDefault()}
         >
@@ -1131,6 +1144,16 @@ export class ArchivedItemQA extends BtrixElement {
     `;
   }
 
+  private readonly disableScrollLock = (e: CustomEvent) => {
+    e.stopPropagation();
+    document.documentElement.classList.add("disable-scroll-lock");
+  };
+
+  private readonly enableScrollLock = (e: CustomEvent) => {
+    e.stopPropagation();
+    document.documentElement.classList.remove("disable-scroll-lock");
+  };
+
   private readonly renderRWP = (rwpId: string, { qa }: { qa: boolean }) => {
     if (!rwpId) return;
 

frontend/src/theme.stylesheet.css

@@ -500,6 +500,10 @@
     height: var(--btrix-overflow-scrim-width);
     --tw-gradient-from: var(--btrix-overflow-scroll-scrim-color, white);
   }
+
+  .sl-scroll-lock.disable-scroll-lock body {
+    overflow: auto !important;
+  }
 }
 
 /* Following styles won't work with layers */
@@ -514,17 +518,3 @@
 [class*=" hover\:text-"]::part(base):hover {
   color: inherit;
 }
-
-/* Fix scrollbar gutter not actually */
-html {
-  overflow: auto;
-  scrollbar-gutter: stable;
-}
-
-body.sl-scroll-lock {
-  scrollbar-gutter: auto !important;
-}
-/* Leave document scrollable now for replay.ts embedded dialogs */
-/* html:has(body.sl-scroll-lock) {
-  overflow: hidden;
-} */