chore: use scroll area component

brettkolodny · brettkolodny · commit 3646e460e5fa · 2025-08-14T13:19:07.000Z
diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -8,6 +8,7 @@ import {
 	SidebarItem,
 	SidebarLink,
 } from "components/FullPageLayout/Sidebar";
+import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { Spinner } from "components/Spinner/Spinner";
 import {
 	WorkspaceBuildData,
@@ -30,36 +31,40 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 	return (
 		<Sidebar>
 			<SidebarCaption>History</SidebarCaption>
-			{builds
-				? builds.map((build) => (
-						<SidebarLink
-							target="_blank"
-							key={build.id}
-							to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
-						>
-							<WorkspaceBuildData build={build} />
-						</SidebarLink>
-					))
-				: Array.from({ length: 15 }, (_, i) => (
-						<SidebarItem key={i}>
-							<WorkspaceBuildDataSkeleton />
-						</SidebarItem>
-					))}
-			{buildsQuery.hasNextPage && (
-				<div css={{ padding: 16 }}>
-					<Button
-						onClick={() => buildsQuery.fetchNextPage()}
-						disabled={buildsQuery.isFetchingNextPage}
-						variant="outline"
-						className="w-full"
-					>
-						<Spinner loading={buildsQuery.isFetchingNextPage}>
-							<ArrowDownwardOutlined />
-						</Spinner>
-						Show more builds
-					</Button>
+			<ScrollArea>
+				<div className="flex flex-col gap-px">
+					{builds
+						? builds.map((build) => (
+								<SidebarLink
+									target="_blank"
+									key={build.id}
+									to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
+								>
+									<WorkspaceBuildData build={build} />
+								</SidebarLink>
+							))
+						: Array.from({ length: 15 }, (_, i) => (
+								<SidebarItem key={i}>
+									<WorkspaceBuildDataSkeleton />
+								</SidebarItem>
+							))}
+					{buildsQuery.hasNextPage && (
+						<div css={{ padding: 16 }}>
+							<Button
+								onClick={() => buildsQuery.fetchNextPage()}
+								disabled={buildsQuery.isFetchingNextPage}
+								variant="outline"
+								className="w-full"
+							>
+								<Spinner loading={buildsQuery.isFetchingNextPage}>
+									<ArrowDownwardOutlined />
+								</Spinner>
+								Show more builds
+							</Button>
+						</div>
+					)}
 				</div>
-			)}
+			</ScrollArea>
 		</Sidebar>
 	);
 };
