style: unify scroll bar style #1173
Conversation
WalkthroughA new scrollbar styling layer is added to the stylesheet, defining root-level scrollbar colors, dimensions, and thumb/track appearance. The implementation uses native scrollbar selectors and WebKit variants to style browser scrollbars without modifying existing rules. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/assets/style.css(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
src/**/*
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
New features should be developed in the
srcdirectory
Files:
src/renderer/src/assets/style.css
src/renderer/**
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Use lowercase with dashes for directories (e.g., components/auth-wizard)
Files:
src/renderer/src/assets/style.css
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
| @layer base { | ||
| :root { | ||
| scrollbar-color: rgba(107, 114, 128, 0.65) transparent; | ||
| scrollbar-width: thin; | ||
| } | ||
|
|
||
| *::-webkit-scrollbar { | ||
| width: 8px; | ||
| height: 8px; | ||
| } | ||
|
|
||
| *::-webkit-scrollbar-track { | ||
| background: transparent; | ||
| } | ||
|
|
||
| *::-webkit-scrollbar-thumb { | ||
| background: rgba(107, 114, 128, 0.65); | ||
| border-radius: 9999px; | ||
| } | ||
|
|
||
| *::-webkit-scrollbar-thumb:hover { | ||
| background: rgba(148, 163, 184, 0.8); | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Replace hardcoded colors with CSS variables for consistency and maintainability.
The scrollbar colors are hardcoded as rgba(107, 114, 128, 0.65) and rgba(148, 163, 184, 0.8) rather than referencing the design system's CSS custom properties. This breaks the DRY principle and makes the color palette harder to maintain.
The values appear to correspond to --color-gray-400 and --color-gray-300 from your existing variable definitions. Consider either:
- Creating dedicated scrollbar color variables in
:root - Referencing existing gray variables with opacity adjustments
@layer base {
:root {
- scrollbar-color: rgba(107, 114, 128, 0.65) transparent;
+ --scrollbar-thumb: rgba(107, 114, 128, 0.65);
+ --scrollbar-thumb-hover: rgba(148, 163, 184, 0.8);
+ scrollbar-color: var(--scrollbar-thumb) transparent;
scrollbar-width: thin;
}
*::-webkit-scrollbar-thumb {
- background: rgba(107, 114, 128, 0.65);
+ background: var(--scrollbar-thumb);
border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover {
- background: rgba(148, 163, 184, 0.8);
+ background: var(--scrollbar-thumb-hover);
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @layer base { | |
| :root { | |
| scrollbar-color: rgba(107, 114, 128, 0.65) transparent; | |
| scrollbar-width: thin; | |
| } | |
| *::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| *::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| *::-webkit-scrollbar-thumb { | |
| background: rgba(107, 114, 128, 0.65); | |
| border-radius: 9999px; | |
| } | |
| *::-webkit-scrollbar-thumb:hover { | |
| background: rgba(148, 163, 184, 0.8); | |
| } | |
| } | |
| @layer base { | |
| :root { | |
| --scrollbar-thumb: rgba(107, 114, 128, 0.65); | |
| --scrollbar-thumb-hover: rgba(148, 163, 184, 0.8); | |
| scrollbar-color: var(--scrollbar-thumb) transparent; | |
| scrollbar-width: thin; | |
| } | |
| *::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| *::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| *::-webkit-scrollbar-thumb { | |
| background: var(--scrollbar-thumb); | |
| border-radius: 9999px; | |
| } | |
| *::-webkit-scrollbar-thumb:hover { | |
| background: var(--scrollbar-thumb-hover); | |
| } | |
| } |
Add dark mode variants for scrollbar styling.
The current scrollbar styling applies uniformly across light and dark themes. Since the rest of the stylesheet defines theme-specific colors in the .dark and [data-theme='dark'] selectors, scrollbar colors should adapt to dark mode for visual consistency.
Consider adding darker thumb colors for dark mode:
@layer base {
:root {
scrollbar-color: rgba(107, 114, 128, 0.65) transparent;
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(107, 114, 128, 0.65);
border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.8);
}
+ .dark,
+ [data-theme='dark'] {
+ scrollbar-color: rgba(75, 85, 99, 0.6) transparent;
+ }
+
+ .dark *::-webkit-scrollbar-thumb,
+ [data-theme='dark'] *::-webkit-scrollbar-thumb {
+ background: rgba(75, 85, 99, 0.6);
+ }
+
+ .dark *::-webkit-scrollbar-thumb:hover,
+ [data-theme='dark'] *::-webkit-scrollbar-thumb:hover {
+ background: rgba(107, 114, 128, 0.8);
+ }
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/renderer/src/assets/style.css around lines 987 to 1010, the scrollbar
styling is currently identical for all themes; add dark-mode variants so
scrollbars match the dark theme. Wrap or duplicate the scrollbar rules under
your dark selectors (e.g. .dark and [data-theme='dark']) and set a darker thumb
color and hover color (and corresponding scrollbar-color value) for those
selectors while keeping the existing light-theme values unchanged; ensure both
the generic scrollbar-color/scrollbar-width rules and the WebKit pseudo-element
rules (::-webkit-scrollbar, ::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover) are defined inside
the dark-mode blocks so they override the base styles when dark theme is active.
* fix: Multiple Issues Affecting Conversation Flow and Model Settings (#1166) * fix: #1164 support maxtoken 2 * fix: mcp tool panel close btn #1163 * fix: #1162 file content in converation * fix(search-assistant): exclude acp models * fix: #1072 thinkcontent respects the global font size set * feat: Hebrew (he-IL) Translation (#1157) * feat: Hebrew (he-IL) Translation * feat: add workspace view to acp agents (#1158) * feat: add workspaceview for acp agent * feat: support workspace dirs * fix: workspace file refresh * fix: tool call status * fix: review refactor * chore: update readme * fix: add file context actions (#1160) * fix: keep last file list * feat(acp-workspace): add file context actions * fix(acp-workspace): move path helpers to preload * fix(preload): allow empty relative path * fix(preload): escape quotes when formatting paths * chore: update docs * fix: Multiple Issues Affecting Conversation Flow and Model Settings (#1166) * fix: #1164 support maxtoken 2 * fix: mcp tool panel close btn #1163 * fix: #1162 file content in converation * fix(search-assistant): exclude acp models * fix: #1072 thinkcontent respects the global font size set * feat: add new i18n translation * feat: add custom font setting (#1167) * feat(settings): add font customization controls * feat: change font with monaco * chore: remove log and remove unuse key * fix: linux font parse * feat: use font-list to get font * fix: font setting not work on settings page (#1169) * style: unify scroll bar style (#1173) * feat: acp init and process manage (#1171) * feat: init acp process on select * feat: warm up acp process on new thread * fix: reuse warmup process * fix: vue warning * chore: add plan for acp debug panel * feat: add debugview for acp * feat: add i18n for debug * fix: code review * fix: ai review * fix: Shutdown may skip releasing warmup‑only processes due to using warmupKey instead of agentId. * chore: update markdown renderer * chore: update mermaid node * Merge commit from fork * chore: update markstream-vue to version 0.0.3-beta.3 fix link renderer feat html_inline render * fix: increase button size for web content limit adjustment * fix: close app kill all acp processes (#1175) * fix: close app kill all acp processes * fix: disable tool call merge * fix: handle uncatch error * fix: remove redundant type * feat: add shell to powerpack (#1178) * chore(powerpack): randomize shell workdir * feat: exclusive inmem server in terminal display * fix: add sandbox in shell script --------- Co-authored-by: xiaomo <wegi866@gmail.com> Co-authored-by: Simon He <674949287@qq.com> Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.