From 1a888b8c6a5971e8bff841dcd22e3733e98a7ffb Mon Sep 17 00:00:00 2001 From: brenner cruvinel Date: Thu, 24 Jul 2025 20:34:53 -0300 Subject: [PATCH] Improve: fix white scrollbar issue in Tauri dark theme - 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. --- bun.lock | 3 + index.html | 1 + .../ClaudeCodeSession.refactored.tsx | 2 +- src/components/ui/scroll-area.tsx | 11 +- src/styles.css | 120 +++++------------- 5 files changed, 39 insertions(+), 98 deletions(-) diff --git a/bun.lock b/bun.lock index c6b28bf..41ccfd2 100644 --- a/bun.lock +++ b/bun.lock @@ -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=="], diff --git a/index.html b/index.html index af20076..5018715 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Claudia - Claude Code Session Browser diff --git a/src/components/ClaudeCodeSession.refactored.tsx b/src/components/ClaudeCodeSession.refactored.tsx index e139ea6..ae70af6 100644 --- a/src/components/ClaudeCodeSession.refactored.tsx +++ b/src/components/ClaudeCodeSession.refactored.tsx @@ -254,7 +254,7 @@ export const ClaudeCodeSession: React.FC = ({ /> {/* Main content area */} -
+
{showPreview ? ( ( return (
{children} diff --git a/src/styles.css b/src/styles.css index 5b1fa96..cf2fe9c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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 */