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:
24
src/components/overlay-scrollbars-init.tsx
Normal file
24
src/components/overlay-scrollbars-init.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { useOverlayScrollbars } from "overlayscrollbars-react"
|
||||
|
||||
export function OverlayScrollbarsInit() {
|
||||
const [init] = useOverlayScrollbars({
|
||||
options: {
|
||||
scrollbars: {
|
||||
theme: "os-theme-codeg",
|
||||
autoHide: "leave",
|
||||
clickScroll: true,
|
||||
},
|
||||
overflow: { x: "hidden" },
|
||||
},
|
||||
defer: true,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
init(document.body)
|
||||
}, [init])
|
||||
|
||||
return null
|
||||
}
|
||||
Reference in New Issue
Block a user