From cbcd5d9747d4f1f5f54be8a2ce82e0a356343c58 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Mon, 19 Feb 2024 08:52:42 -0500
Subject: [PATCH] [CL-192][CL-193] fix virtual scroll (#7986)

* [CL-192] use sticky sidebar instead of static; remove main screen height

* [CL-193] patch cdk dialog scroll block
---
 apps/browser/src/popup/scss/base.scss            | 6 ------
 libs/components/src/layout/layout.component.html | 4 ++--
 libs/components/src/tw-theme.css                 | 6 ++++++
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 4ca486369b..85983c6391 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -6,12 +6,6 @@
   margin: 0;
 }
 
-html {
-  &.cdk-global-scrollblock {
-    position: unset;
-  }
-}
-
 html,
 body {
   font-family: $font-family-sans-serif;
diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html
index 08fbb26063..b5af1a1984 100644
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -22,14 +22,14 @@
         '--color-background-alt4': 'var(--color-secondary-300)'
       }
     "
-    class="tw-inset-y-0 tw-left-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"
+    class="tw-sticky tw-inset-y-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"
   >
     <ng-content select="[slot=sidebar]"></ng-content>
   </aside>
   <main
     [id]="mainContentId"
     tabindex="-1"
-    class="tw-overflow-auto tw-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6"
+    class="tw-overflow-auto tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6"
   >
     <ng-content></ng-content>
   </main>
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 6775a0fa58..21c9f345b7 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -200,3 +200,9 @@ summary.tw-list-none::-webkit-details-marker {
 .cdk-overlay-pane {
   z-index: 2000 !important;
 }
+
+.cdk-global-scrollblock {
+  position: unset;
+  height: 100%;
+  overflow: hidden;
+}