From 38c26317e03051bb33f5e445c0c132742d4f05ee Mon Sep 17 00:00:00 2001
From: ken-zlai <ken@zipline.ai>
Date: Fri, 7 Feb 2025 14:13:28 -0700
Subject: [PATCH 1/2] remove ScrollArea and uses

---
 .../lib/components/ui/scroll-area/index.ts    | 10 ------
 .../scroll-area/scroll-area-scrollbar.svelte  | 27 ----------------
 .../ui/scroll-area/scroll-area.svelte         | 32 -------------------
 frontend/src/routes/+layout.svelte            |  5 ++-
 .../[slug]/observability/drift/+page.svelte   |  5 ++-
 5 files changed, 4 insertions(+), 75 deletions(-)
 delete mode 100644 frontend/src/lib/components/ui/scroll-area/index.ts
 delete mode 100644 frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 delete mode 100644 frontend/src/lib/components/ui/scroll-area/scroll-area.svelte

diff --git a/frontend/src/lib/components/ui/scroll-area/index.ts b/frontend/src/lib/components/ui/scroll-area/index.ts
deleted file mode 100644
index d5468067de..0000000000
--- a/frontend/src/lib/components/ui/scroll-area/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import Scrollbar from './scroll-area-scrollbar.svelte';
-import Root from './scroll-area.svelte';
-
-export {
-	Root,
-	Scrollbar,
-	//,
-	Root as ScrollArea,
-	Scrollbar as ScrollAreaScrollbar
-};
diff --git a/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
deleted file mode 100644
index adb10280cf..0000000000
--- a/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
-
-	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
-		orientation?: 'vertical' | 'horizontal';
-	};
-
-	let className: $$Props['class'] = undefined;
-	export let orientation: $$Props['orientation'] = 'vertical';
-	export { className as class };
-</script>
-
-<ScrollAreaPrimitive.Scrollbar
-	{orientation}
-	class={cn(
-		'flex touch-none select-none transition-colors',
-		orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
-		orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',
-		className
-	)}
->
-	<slot />
-	<ScrollAreaPrimitive.Thumb
-		class={cn('bg-border relative rounded-full', orientation === 'vertical' && 'flex-1')}
-	/>
-</ScrollAreaPrimitive.Scrollbar>
diff --git a/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte b/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
deleted file mode 100644
index bdd4001329..0000000000
--- a/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
-	import { Scrollbar } from './index.js';
-	import { cn } from '$lib/utils.js';
-
-	type $$Props = ScrollAreaPrimitive.Props & {
-		orientation?: 'vertical' | 'horizontal' | 'both';
-		scrollbarXClasses?: string;
-		scrollbarYClasses?: string;
-	};
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
-	export let orientation = 'vertical';
-	export let scrollbarXClasses: string = '';
-	export let scrollbarYClasses: string = '';
-</script>
-
-<ScrollAreaPrimitive.Root {...$$restProps} class={cn('relative overflow-hidden', className)}>
-	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
-		<ScrollAreaPrimitive.Content class="!block">
-			<slot />
-		</ScrollAreaPrimitive.Content>
-	</ScrollAreaPrimitive.Viewport>
-	{#if orientation === 'vertical' || orientation === 'both'}
-		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
-	{/if}
-	{#if orientation === 'horizontal' || orientation === 'both'}
-		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
-	{/if}
-	<ScrollAreaPrimitive.Corner />
-</ScrollAreaPrimitive.Root>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 32dd319b64..a2da2124e5 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -5,7 +5,6 @@
 	import NavigationSlider from '$lib/components/NavigationSlider.svelte';
 	import NavigationBar from '$lib/components/NavigationBar.svelte';
 	import BreadcrumbNav from '$lib/components/BreadcrumbNav.svelte';
-	import { ScrollArea } from '$lib/components/ui/scroll-area';
 	import { entityConfig } from '$lib/types/Entity/Entity';
 
 	let { children }: { children: Snippet } = $props();
@@ -33,11 +32,11 @@
 		<div
 			class="absolute top-0 left-0 w-full h-4 border-l border-t border-border rounded-tl-xl z-20"
 		></div>
-		<ScrollArea class="flex-1">
+		<div class="flex-1 overflow-y-auto">
 			<div class="px-8 py-5">
 				<BreadcrumbNav {breadcrumbs} class="mb-[38px]" />
 				{@render children()}
 			</div>
-		</ScrollArea>
+		</div>
 	</main>
 </div>
diff --git a/frontend/src/routes/joins/[slug]/observability/drift/+page.svelte b/frontend/src/routes/joins/[slug]/observability/drift/+page.svelte
index d0142d7568..c67b738caa 100644
--- a/frontend/src/routes/joins/[slug]/observability/drift/+page.svelte
+++ b/frontend/src/routes/joins/[slug]/observability/drift/+page.svelte
@@ -5,7 +5,6 @@
 
 	import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
 	import type { FeatureResponse } from '$lib/types/Model/Model';
-	import { ScrollArea } from '$lib/components/ui/scroll-area';
 	import { Api } from '$lib/api/api';
 	import { Dialog, DialogContent, DialogHeader } from '$lib/components/ui/dialog';
 	import { formatDate } from '$lib/util/format';
@@ -207,7 +206,7 @@
 			/>
 		</DialogHeader>
 
-		<ScrollArea class="flex-grow px-7">
+		<div class="flex-grow px-7 overflow-y-auto">
 			{#if selectedSeriesPoint}
 				{@const selectedGroup = data.joinTimeseries.items.find((group) =>
 					group.items.some((item) => item.feature === selectedSeriesPoint?.series.key)
@@ -328,7 +327,7 @@
 					{/snippet}
 				</CollapsibleSection>
 			{/if}
-		</ScrollArea>
+		</div>
 	</DialogContent>
 </Dialog>
 

From 3ffb370234bdcc8289a4786cd61ece8fabc56ba9 Mon Sep 17 00:00:00 2001
From: ken-zlai <ken@zipline.ai>
Date: Fri, 7 Feb 2025 14:13:39 -0700
Subject: [PATCH 2/2] add global scrollbar styles

---
 frontend/src/app.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index a823cf0b5f..0533b01364 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -119,16 +119,36 @@
 		--job-queued-bg: 0 0% 16%;
 		--job-queued-border: 0 0% 24%;
 		--job-queued-active-border: 0 0% 40%;
+
+		--scrollcolor: hsla(0, 0%, 13%, 1);
+		--scrollbackground: transparent;
+		scrollbar-color: var(--scrollcolor) var(--scrollbackground);
 	}
 }
 
 @layer base {
 	* {
 		@apply border-border antialiased;
+		scrollbar-width: thin;
 	}
 	body {
 		@apply bg-background text-foreground;
 	}
+
+	::-webkit-scrollbar {
+		border-radius: 1rem;
+		background: var(--scrollbackground);
+	}
+
+	::-webkit-scrollbar-thumb {
+		border-radius: 1rem;
+		background: var(--scrollcolor);
+	}
+
+	::-webkit-scrollbar-track {
+		border-radius: 1rem;
+		background: var(--scrollbackground);
+	}
 }
 
 @font-face {