feat(frontend): replace native scrollbar styling with OverlayScrollbars

Adopt OverlayScrollbars for cross-platform consistent overlay scrollbars
with auto-hide on pointer leave, hover grow effect, and click-to-scroll.

- Add overlayscrollbars + overlayscrollbars-react dependencies
- Rewrite ScrollArea component from Radix to OverlayScrollbars wrapper
- Define custom theme `os-theme-codeg` in globals.css (6px → 8px on hover)
- Initialize body-level overlay scrollbar via OverlayScrollbarsInit
- Migrate all scrollbar-thin / scrollbar-thin-edge usages to ScrollArea
- Keep native .scrollbar-thin fallback for virtua scroll containers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
xintaofei
2026-04-12 20:16:46 +08:00
parent ad50cc28fc
commit 0fafe782ee
13 changed files with 411 additions and 336 deletions

View File

@@ -24,6 +24,7 @@ import { Streamdown } from "streamdown"
import { readFileBase64 } from "@/lib/api"
import { normalizeMathDelimiters } from "@/components/ai-elements/message"
import { defineMonacoThemes, useMonacoThemeSync } from "@/lib/monaco-themes"
import { ScrollArea } from "@/components/ui/scroll-area"
import "@/lib/monaco-local"
const math = createMathPlugin({ singleDollarTextMath: true })
@@ -693,7 +694,7 @@ function DiffFileList({
</p>
)}
</div>
<div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin">
<ScrollArea className="flex-1 min-h-0">
<div className="py-1">
{diffOutline.files.map((file) => (
<ContextMenu key={file.key}>
@@ -743,7 +744,7 @@ function DiffFileList({
</ContextMenu>
))}
</div>
</div>
</ScrollArea>
</div>
)
}