yovinchen/claudia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve: fix white scrollbar issue in Tauri dark theme

Browse Source 
- Add color-scheme: dark meta tag and CSS for proper dark scrollbars
- Implement ultra-thin (3px) elegant scrollbars globally
- Remove overflow-hidden that was cutting scrollbar at top
- Clean up redundant scrollbar CSS and component styling
- Optimize scrollbar appearance for both web and Tauri desktop

Fixes scrollbar visibility issues in dark theme across all components.
This commit is contained in:
brenner cruvinel
2025-07-24 20:34:53 -03:00
parent 4ddb6a1995
commit 1a888b8c6a
5 changed files with 39 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bun.lock
View File

@@ -44,6 +44,7 @@
"tailwind-merge": "^2.6.0",
"tailwindcss": "^4.1.8",
"zod": "^3.24.1",
"zustand": "^5.0.6",
},
"devDependencies": {
"@tauri-apps/cli": "^2",
@@ -1021,6 +1022,8 @@
"zod": ["zod@3.25.67", "", {}, "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw=="],
"zustand": ["zustand@5.0.6", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A=="],
"zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
"@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],

1
index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>Claudia - Claude Code Session Browser</title>
</head>

2
src/components/ClaudeCodeSession.refactored.tsx
View File

@@ -254,7 +254,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
/>
{/* Main content area */}
<div className="flex-1 flex overflow-hidden">
<div className="flex-1 flex">
{showPreview ? (
<SplitPane
left={

11
src/components/ui/scroll-area.tsx
View File

@@ -25,16 +25,7 @@ export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
return (
<div
ref={ref}
className={cn(
"relative overflow-auto",
// Custom scrollbar styling
"scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent",
"[&::-webkit-scrollbar]:w-2",
"[&::-webkit-scrollbar-track]:bg-transparent",
"[&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-thumb]:rounded-full",
"[&::-webkit-scrollbar-thumb:hover]:bg-border/80",
className
)}
className={cn("relative overflow-auto", className)}
{...props}
>
{children}

120
src/styles.css
View File

@@ -48,6 +48,10 @@
border-color: var(--color-border);
}
html {
color-scheme: dark;
}
body {
background-color: var(--color-background);
color: var(--color-foreground);
@@ -556,115 +560,57 @@ button:focus-visible,
z-index: 1;
}
/* --- THEME-MATCHING SCROLLBARS --- */
/* --- ELEGANT SCROLLBARS --- */
/* For Firefox */
/* Firefox - thin and minimal */
* {
scrollbar-width: thin;
scrollbar-color: var(--color-muted-foreground) var(--color-background);
scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}
/* For Webkit Browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
width: 12px;
height: 12px;
/* Global webkit scrollbar - ultra thin and elegant */
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
*::-webkit-scrollbar-track {
background: var(--color-background);
}
*::-webkit-scrollbar-thumb {
background-color: var(--color-muted);
border-radius: 6px;
border: 3px solid var(--color-background);
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--color-muted-foreground);
}
*::-webkit-scrollbar-corner {
::-webkit-scrollbar-track {
background: transparent;
}
/* Code blocks and editors specific scrollbar */
::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 2px;
transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(156, 163, 175, 0.6);
}
::-webkit-scrollbar-corner {
background: transparent;
}
/* Code blocks - slightly larger for better usability */
pre::-webkit-scrollbar,
.w-md-editor-content::-webkit-scrollbar,
code::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar {
code::-webkit-scrollbar {
width: 8px;
height: 8px;
}
pre::-webkit-scrollbar-thumb,
.w-md-editor-content::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb {
background-color: rgba(107, 114, 128, 0.2);
code::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.4);
border-radius: 4px;
}
pre::-webkit-scrollbar-thumb:hover,
.w-md-editor-content::-webkit-scrollbar-thumb:hover,
code::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover {
background-color: rgba(107, 114, 128, 0.4);
}
/* Syntax highlighter specific */
.bg-zinc-950 ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.bg-zinc-950 ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.bg-zinc-950 ::-webkit-scrollbar-thumb {
background-color: rgba(107, 114, 128, 0.3);
border-radius: 4px;
}
.bg-zinc-950 ::-webkit-scrollbar-thumb:hover {
background-color: rgba(107, 114, 128, 0.5);
}
/* Code preview specific scrollbar */
.code-preview-scroll::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.code-preview-scroll::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
.code-preview-scroll::-webkit-scrollbar-thumb {
background-color: rgba(107, 114, 128, 0.4);
border-radius: 6px;
border: 2px solid transparent;
background-clip: content-box;
}
.code-preview-scroll::-webkit-scrollbar-thumb:hover {
background-color: rgba(107, 114, 128, 0.6);
}
.code-preview-scroll::-webkit-scrollbar-thumb:active {
background-color: rgba(107, 114, 128, 0.8);
}
.code-preview-scroll::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
/* Firefox scrollbar for code preview */
.code-preview-scroll {
scrollbar-width: thin;
scrollbar-color: rgba(107, 114, 128, 0.4) rgba(0, 0, 0, 0.2);
code::-webkit-scrollbar-thumb:hover {
background-color: rgba(156, 163, 175, 0.6);
}
/* NFO Credits Scanlines Animation */