diff --git a/site/src/components/ScrollArea/ScrollArea.stories.tsx b/site/src/components/ScrollArea/ScrollArea.stories.tsx
index 44e82a14d7..2546719e8f 100644
--- a/site/src/components/ScrollArea/ScrollArea.stories.tsx
+++ b/site/src/components/ScrollArea/ScrollArea.stories.tsx
@@ -104,3 +104,74 @@ export const Accessibility: Story = {
 		).toBeGreaterThanOrEqual(3);
 	},
 };
+
+// type="always" forces the thumb to render so its `::before` hit-target
+// pseudo-element is measurable.
+export const ThumbHitAreaOverride: Story = {
+	render: () => (
+		<div className="flex gap-4">
+			<div
+				data-testid="default-area"
+				className="w-48 rounded-md border border-solid border-border-default bg-surface-primary"
+			>
+				<ScrollArea className="h-48" type="always" scrollBarClassName="w-1.5">
+					<OverflowingContent />
+				</ScrollArea>
+			</div>
+			<div
+				data-testid="override-area"
+				className="w-48 rounded-md border border-solid border-border-default bg-surface-primary"
+			>
+				<ScrollArea
+					className="h-48"
+					type="always"
+					orientation="both"
+					scrollBarClassName="w-1.5"
+					horizontalScrollBarClassName="h-1.5"
+					scrollThumbClassName="before:hidden"
+				>
+					<OverflowingContent />
+				</ScrollArea>
+			</div>
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		const getThumb = (
+			testid: string,
+			orientation: "vertical" | "horizontal",
+		) => {
+			const area = canvasElement.querySelector(`[data-testid='${testid}']`);
+			return area?.querySelector(`[data-orientation="${orientation}"]`)
+				?.firstElementChild as HTMLElement | null | undefined;
+		};
+
+		await waitFor(() => {
+			expect(getThumb("default-area", "vertical")).toBeTruthy();
+			expect(getThumb("override-area", "vertical")).toBeTruthy();
+			expect(getThumb("override-area", "horizontal")).toBeTruthy();
+		});
+
+		const defaultThumb = getThumb("default-area", "vertical");
+		const overrideThumb = getThumb("override-area", "vertical");
+		const overrideHorizontalThumb = getThumb("override-area", "horizontal");
+		if (!defaultThumb || !overrideThumb || !overrideHorizontalThumb) {
+			throw new Error("scrollbar thumbs not found");
+		}
+
+		const defaultBefore = getComputedStyle(defaultThumb, "::before");
+		await expect(defaultBefore.display).not.toBe("none");
+		await expect(Number.parseFloat(defaultBefore.width)).toBeGreaterThanOrEqual(
+			24,
+		);
+
+		await expect(getComputedStyle(overrideThumb, "::before").display).toBe(
+			"none",
+		);
+		await expect(
+			getComputedStyle(overrideHorizontalThumb, "::before").display,
+		).toBe("none");
+		await expect(overrideThumb.getBoundingClientRect().width).toBeGreaterThan(
+			0,
+		);
+	},
+};
diff --git a/site/src/components/ScrollArea/ScrollArea.tsx b/site/src/components/ScrollArea/ScrollArea.tsx
index c20fabd541..dbb0721a19 100644
--- a/site/src/components/ScrollArea/ScrollArea.tsx
+++ b/site/src/components/ScrollArea/ScrollArea.tsx
@@ -10,6 +10,8 @@ interface ScrollAreaProps
 	extends React.ComponentPropsWithRef<typeof ScrollAreaPrimitive.Root> {
 	scrollBarClassName?: string;
 	horizontalScrollBarClassName?: string;
+	/** Extra thumb classes; also reaches the thumb's `::before` hit-target. */
+	scrollThumbClassName?: string;
 	viewportClassName?: string;
 	viewportTabIndex?: number;
 	/** Which scrollbar(s) to show. Defaults to "vertical". */
@@ -20,6 +22,7 @@ export const ScrollArea: React.FC<ScrollAreaProps> = ({
 	className,
 	scrollBarClassName,
 	horizontalScrollBarClassName,
+	scrollThumbClassName,
 	viewportClassName,
 	viewportTabIndex,
 	orientation = "vertical",
@@ -61,6 +64,7 @@ export const ScrollArea: React.FC<ScrollAreaProps> = ({
 				<ScrollBar
 					orientation="vertical"
 					className={cn("z-10", scrollBarClassName)}
+					thumbClassName={scrollThumbClassName}
 				/>
 			)}
 			{(orientation === "horizontal" || orientation === "both") && (
@@ -72,6 +76,7 @@ export const ScrollArea: React.FC<ScrollAreaProps> = ({
 							? horizontalScrollBarClassName
 							: (horizontalScrollBarClassName ?? scrollBarClassName),
 					)}
+					thumbClassName={scrollThumbClassName}
 				/>
 			)}
 			<ScrollAreaPrimitive.Corner />
@@ -80,8 +85,12 @@ export const ScrollArea: React.FC<ScrollAreaProps> = ({
 };
 
 export const ScrollBar: React.FC<
-	React.ComponentPropsWithRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
-> = ({ className, orientation = "vertical", ...props }) => {
+	React.ComponentPropsWithRef<
+		typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+	> & {
+		thumbClassName?: string;
+	}
+> = ({ className, orientation = "vertical", thumbClassName, ...props }) => {
 	return (
 		<ScrollAreaPrimitive.ScrollAreaScrollbar
 			orientation={orientation}
@@ -102,6 +111,7 @@ export const ScrollBar: React.FC<
 					orientation === "vertical"
 						? "before:right-0 before:top-1/2 before:h-full before:min-h-6 before:w-6 before:-translate-y-1/2"
 						: "before:bottom-0 before:left-1/2 before:w-full before:min-w-6 before:h-6 before:-translate-x-1/2",
+					thumbClassName,
 				)}
 			/>
 		</ScrollAreaPrimitive.ScrollAreaScrollbar>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
index 8bdadc5a44..2eb4b4d1da 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
@@ -447,6 +447,10 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 				<ScrollArea
 					className="min-h-0 flex-1 [&_[data-radix-scroll-area-viewport]>div]:!block"
 					scrollBarClassName="w-1.5"
+					// The default 24px hit-target extends ~18px left of this narrow
+					// scrollbar, onto the row controls (actions menu, timestamp,
+					// indicators). Disable it so those controls stay clickable.
+					scrollThumbClassName="before:hidden"
 					viewportClassName={cn(
 						"[mask-image:linear-gradient(to_bottom,transparent_0,black_20px,black_calc(100%-20px),transparent_100%)]",
 						"[-webkit-mask-image:linear-gradient(to_bottom,transparent_0,black_20px,black_calc(100%-20px),transparent_100%)]",