From fca8a0bbeba95e8cd25271549c0dddc0a1cfdf59 Mon Sep 17 00:00:00 2001
From: pikann22 <hvhai22@gmail.com>
Date: Fri, 17 Jul 2026 18:13:40 +0000
Subject: [PATCH] refactor: simplify scrollbar styles across components

---
 .../src/components/assistant-ui/thread.tsx    |  2 +-
 .../automation/add-workflow-node-modal.tsx    |  2 +-
 .../task-detail/add-task-link-modal.tsx       |  2 +-
 .../interactions/task-detail/index.tsx        |  2 +-
 apps/web/src/index.css                        | 40 +++++++++++++++++++
 .../projects/$projectId/docs/$docId.tsx       |  2 +-
 6 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/assistant-ui/thread.tsx b/apps/web/src/components/assistant-ui/thread.tsx
index e264fb05..f4eaf618 100644
--- a/apps/web/src/components/assistant-ui/thread.tsx
+++ b/apps/web/src/components/assistant-ui/thread.tsx
@@ -120,7 +120,7 @@ const ThreadRoot: FC<{ isEmpty: boolean }> = ({ isEmpty }) => {
 			<ThreadPrimitive.Viewport
 				turnAnchor="top"
 				data-slot="aui_thread-viewport"
-				className="relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth [scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/60 [&::-webkit-scrollbar-thumb]:hover:bg-border"
+				className="relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth [scrollbar-gutter:stable]"
 			>
 				<div
 					className={cn(
diff --git a/apps/web/src/components/projects/automation/add-workflow-node-modal.tsx b/apps/web/src/components/projects/automation/add-workflow-node-modal.tsx
index 802add50..a82a95d5 100644
--- a/apps/web/src/components/projects/automation/add-workflow-node-modal.tsx
+++ b/apps/web/src/components/projects/automation/add-workflow-node-modal.tsx
@@ -113,7 +113,7 @@ export function AddWorkflowNodeModal({
 					</div>
 				</div>
 
-				<div className="mx-5 mb-5 rounded-xl border border-border/20 overflow-hidden max-h-64 overflow-y-auto [scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/40">
+				<div className="mx-5 mb-5 rounded-xl border border-border/20 overflow-hidden max-h-64 overflow-y-auto [scrollbar-gutter:stable]">
 					{loading && (
 						<div className="flex items-center justify-center py-8 text-muted-foreground/50 text-sm">
 							{t("automation.addNodeModal.loadingTasks")}
diff --git a/apps/web/src/components/projects/interactions/task-detail/add-task-link-modal.tsx b/apps/web/src/components/projects/interactions/task-detail/add-task-link-modal.tsx
index 2a588ce7..bf813df2 100644
--- a/apps/web/src/components/projects/interactions/task-detail/add-task-link-modal.tsx
+++ b/apps/web/src/components/projects/interactions/task-detail/add-task-link-modal.tsx
@@ -208,7 +208,7 @@ export function AddTaskLinkModal({
 				</div>
 
 				{/* Task list */}
-				<div className="mx-5 mb-5 rounded-xl border border-border/20 overflow-hidden max-h-64 overflow-y-auto [scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/40">
+				<div className="mx-5 mb-5 rounded-xl border border-border/20 overflow-hidden max-h-64 overflow-y-auto [scrollbar-gutter:stable]">
 					{loading && (
 						<div className="flex items-center justify-center py-8 text-muted-foreground/50 text-sm">
 							{t("taskDetail.addTaskLinkModal.loadingTasks")}
diff --git a/apps/web/src/components/projects/interactions/task-detail/index.tsx b/apps/web/src/components/projects/interactions/task-detail/index.tsx
index cec921e5..609b7de2 100644
--- a/apps/web/src/components/projects/interactions/task-detail/index.tsx
+++ b/apps/web/src/components/projects/interactions/task-detail/index.tsx
@@ -271,7 +271,7 @@ export function TaskDetailModal({
 			{/* ── Body: stacks on mobile, side-by-side on lg+ ── */}
 			<div className="flex flex-col lg:flex-row flex-1 min-w-0 min-h-0 overflow-y-auto lg:overflow-hidden">
 				{/* Main content area: no own scroll on mobile (body scrolls), scrollable on lg+ */}
-				<div className="lg:flex-1 lg:overflow-y-auto [scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/60 [&::-webkit-scrollbar-thumb]:hover:bg-border">
+				<div className="lg:flex-1 lg:overflow-y-auto [scrollbar-gutter:stable]">
 					<div className="px-4 lg:px-8 py-5 lg:py-7 space-y-6 lg:space-y-8 max-w-3xl mx-auto">
 						{/* Type badge + Status chip + Title */}
 						<div className="space-y-4">
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 07683360..01999be7 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -137,6 +137,46 @@
 	--sidebar-ring: #9ed957;
 }
 
+/*
+ * Custom scrollbars — applied globally via the universal selector so every
+ * scrollable element (tables, dropdowns, panels, chat panes, ...) gets the
+ * themed thin scrollbar without needing per-component classes. A component
+ * can still override width/colors with a more specific selector, or opt out
+ * entirely with `.no-scrollbar`.
+ */
+* {
+	scrollbar-width: thin;
+	scrollbar-color: color-mix(in oklab, var(--border) 60%, transparent)
+		transparent;
+}
+
+*::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+	background: color-mix(in oklab, var(--border) 60%, transparent);
+	border-radius: 9999px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+	background: var(--border);
+}
+
+.no-scrollbar {
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+	display: none;
+}
+
 @theme inline {
 	--font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
 	--font-display: "Syne", ui-sans-serif, sans-serif;
diff --git a/apps/web/src/routes/_authenticated/projects/$projectId/docs/$docId.tsx b/apps/web/src/routes/_authenticated/projects/$projectId/docs/$docId.tsx
index 26f2a925..f7c47e0d 100644
--- a/apps/web/src/routes/_authenticated/projects/$projectId/docs/$docId.tsx
+++ b/apps/web/src/routes/_authenticated/projects/$projectId/docs/$docId.tsx
@@ -175,7 +175,7 @@ function DocEditorPage() {
 			{/* ── Body: editor + optional right panel ──────────────────────── */}
 			<div className="flex flex-1 min-h-0 overflow-hidden">
 				{/* Editor area */}
-				<div className="flex-1 overflow-y-auto [scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/60 [&::-webkit-scrollbar-thumb]:hover:bg-border">
+				<div className="flex-1 overflow-y-auto [scrollbar-gutter:stable]">
 					<div className="max-w-7xl mx-auto px-8 py-7">
 						{doc && (
 							<DocEditor