From 043b52745ae90ec108a839510c20252bf6d3deda Mon Sep 17 00:00:00 2001
From: Elain T <elain.tsai@graycore.io>
Date: Wed, 10 Jan 2024 18:58:25 -0500
Subject: [PATCH] feat(design): update sidebar overflow styles so elements
 within the viewport content can be positioned sticky

---
 .../src/sidebar-viewport/sidebar-viewport.component.scss   | 4 ++--
 .../src/sidebar-viewport/sidebar-viewport.component.ts     | 7 +++++++
 libs/design/sidebar/src/sidebar/sidebar.component.scss     | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.scss b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.scss
index 41722eb34d..d9cc7f6fdb 100644
--- a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.scss
+++ b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.scss
@@ -3,7 +3,7 @@
 :host {
 	// fixes a bug where certain elements show in front of backdrop for a second.
 	display: flex;
-	overflow: hidden;
+	min-height: 100dvh;
 	position: relative;
 	width: 100%;
 	z-index: variables.$daff-sidebar-viewport-z-index;
@@ -16,7 +16,6 @@
 		flex: 0 1 auto;
 		width: 100%;
 		z-index: variables.$daff-sidebar-content-z-index;
-		overflow-y: auto;
 		height: 100%;
 	}
 
@@ -48,6 +47,7 @@
 
 :host-context(daff-sidebar-viewport daff-sidebar-viewport) {
 	transform: translateX(0px);
+	min-height: auto;
 
 	.daff-sidebar-viewport__inner {
 		padding-left: 0px !important;
diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts
index 72d7869fc8..30decb4dab 100644
--- a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts
+++ b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts
@@ -153,6 +153,13 @@ export class DaffSidebarViewportComponent implements AfterContentChecked {
     const nextShift = sidebarViewportContentShift(this.sidebars) + 'px';
     if (this._shift !== nextShift) {
       this._shift = nextShift;
+      if(nextShift !== '0px') {
+        this._elementRef.nativeElement.style.overflow = 'hidden';
+      } else {
+        setTimeout(() => {
+          this._elementRef.nativeElement.style.overflow = null;
+        }, 200);
+      }
       this.updateAnimationState();
       this.cdRef.markForCheck();
     }
diff --git a/libs/design/sidebar/src/sidebar/sidebar.component.scss b/libs/design/sidebar/src/sidebar/sidebar.component.scss
index 617b11bb6c..de9f2ff9c6 100644
--- a/libs/design/sidebar/src/sidebar/sidebar.component.scss
+++ b/libs/design/sidebar/src/sidebar/sidebar.component.scss
@@ -56,7 +56,7 @@
 :host-context(.daff-sidebar-viewport.beside) {
 	&.side-fixed {
 		top: 0;
-		height: 100dvh;
+		height: 100%;
 	}
 }