diff --git a/site/src/index.css b/site/src/index.css
index 5d52d787c7..ba70176baa 100644
--- a/site/src/index.css
+++ b/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
diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
index 1725585dda..221bd97894 100644
--- a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/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>
diff --git a/site/src/modules/terminal/WorkspaceTerminal.tsx b/site/src/modules/terminal/WorkspaceTerminal.tsx
index b62682b79b..bf46d5321b 100644
--- a/site/src/modules/terminal/WorkspaceTerminal.tsx
+++ b/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
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx
index c8befa4110..60835ef126 100644
--- a/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx
+++ b/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,
 			)}
 		>