fix(site): standardize scrollbar styling with global baseline (#24019)

## Summary

Standardizes all frontend scrollbars to use `scrollbar-width: thin` and
`scrollbar-color: hsl(var(--surface-quaternary)) transparent`.

### Changes

**Global baseline** (`site/src/index.css`):
- Both properties are inherited, so this cascades to all scroll
containers
- Components that hide scrollbars (e.g. `SidebarTabView`) override
locally with `scrollbar-width: none`

**Removed redundant per-component scrollbar utilities**:
- `AgentDetailView.tsx` — removed `[scrollbar-width:thin]` and
`[scrollbar-color:...]` (preserved `[scrollbar-gutter:stable]`)
- `ConfigureAgentsDialog.tsx` — removed redundant scrollbar utilities
from two locations
- `DeploymentBannerView.tsx` — removed `[scrollbar-width:thin]`
- `ChatMessageInput.tsx` — removed redundant scrollbar utilities

**Aligned specialized scrollbar surfaces**:
- `TerminalPage.tsx` — updated webkit scrollbar thumb from hardcoded
`rgba(255, 255, 255, 0.18)` → `hsl(var(--surface-quaternary))`, track
from `inherit` → `transparent`, width from `10px` → `8px`
- `Chart.tsx` — removed local JS-style scrollbar overrides (now covered
by global baseline)

### Preserved as-is
- `SidebarTabView.tsx` — intentional hidden scrollbar (`scrollbar-width:
none` overrides global)
- `ScrollArea.tsx` — already uses `bg-surface-quaternary` ✓
- `MonacoEditor.tsx` — Monaco manages its own scrollbars internally
- All `[scrollbar-gutter:stable]` usages preserved

site/src/index.css

@@ -188,6 +188,16 @@
 		@apply border-none p-0 m-0 w-full;
 	}
 
+	/* Global scrollbar color baseline: surface-quaternary thumb on
+	transparent track. scrollbar-color is inherited, so this cascades
+	to all scroll containers. We intentionally do NOT set
+	scrollbar-width globally because any non-auto value opts out of
+	overlay scrollbars on macOS/Chromium, causing a permanent gutter
+	on every container (even when content does not overflow). */
+	:root {
+		scrollbar-color: hsl(var(--surface-quaternary)) transparent;
+	}
+
 	/* Prevent layout shift when modals open by maintaining scrollbar width.
 	scrollbar-gutter: stable reserves space for the scrollbar so Radix's
 	scroll-bar compensation (margin-right/padding-right) is unnecessary

site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

@@ -104,7 +104,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 		<div
 			className="sticky bottom-0 z-[1] flex h-9 w-full items-center gap-8
 		 		overflow-x-auto overflow-y-hidden whitespace-nowrap border-0 border-t border-solid border-border
-				bg-surface-primary pr-4 font-mono text-xs leading-none [scrollbar-width:thin]"
+				bg-surface-primary pr-4 font-mono text-xs leading-none"
 		>
 			<TooltipProvider delayDuration={100}>
 				<Tooltip>

site/src/modules/terminal/WorkspaceTerminal.tsx

@@ -486,16 +486,16 @@ export const WorkspaceTerminal = ({
 				}
 
 				${terminalScopeSelector} .xterm-viewport::-webkit-scrollbar {
-					width: 10px;
+					width: 8px;
 				}
 
 				${terminalScopeSelector} .xterm-viewport::-webkit-scrollbar-track {
-					background-color: inherit;
+					background-color: transparent;
 				}
 
 				${terminalScopeSelector} .xterm-viewport::-webkit-scrollbar-thumb {
 					min-height: 20px;
-					background-color: rgba(255, 255, 255, 0.18);
+					background-color: hsl(var(--surface-quaternary));
 				}
 			`}</style>
 			<div

site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx

@@ -61,7 +61,6 @@ export const ChartContent: FC<HTMLProps<HTMLDivElement>> = (props) => {
 			ref={contentRef}
 			className={cn(
 				"relative flex flex-1 items-stretch overflow-auto text-xs font-medium",
-				"[scrollbar-color:hsl(var(--border-default))_hsl(var(--surface-primary))]",
 				props.className,
 			)}
 		>