Ken/standardize scroll (#350)

## Summary
Quick change to standardize scroll styles across the app

## Checklist
- [ ] Added Unit Tests
- [ ] Covered by existing CI
- [ ] Integration tested
- [ ] Documentation update



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- Style  
- Enhanced the appearance of scrollbars with updated styling and
customizable color options.

- Refactor  
- Simplified scroll behavior by replacing custom scrolling components
with standard, CSS-managed scroll containers across the layout and key
content areas.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: ken-zlai

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 {

frontend/src/lib/components/ui/scroll-area/index.ts

@@ -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>

frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -9,7 +9,6 @@
 
 	import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
 	import type { ITileSummarySeries } from '$src/lib/types/codegen';
-	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';
@@ -219,7 +218,7 @@
 			/>
 		</DialogHeader>
 
-		<ScrollArea class="flex-grow px-7">
+		<div class="flex-grow px-7 overflow-y-auto">
 			{#if selectedSeriesPoint}
 				{@const [groupName, values] =
 					driftSeriesByGroupName.find(([_, values]) =>
@@ -367,7 +366,7 @@
 					{/snippet}
 				</CollapsibleSection>
 			{/if}
-		</ScrollArea>
+		</div>
 	</DialogContent>
 </Dialog>