bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(scrollbar): theme scrollbars inside portal-rendered elements

Browse Source 
Scrollbar theming was scoped to .app, so anything rendered outside it via
createPortal(..., document.body) — Modal, Select/MultiSelect's floating
menu, DataTable's column-visibility picker — fell back to the browser's
default light-on-dark scrollbar. Extends the same scrollbar-color rules
to .modal, .select-menu, and .dt-col-picker.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bonamin
2026-09-21 18:22:30 +03:00
co-authored by Claude Sonnet 5
parent 7f6145ca35
commit 38750ba951
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/global.css
+24 -6
View File
@@ -332,27 +332,45 @@
width: 100%; width: 100%;
} }
/* Scrollbars — scoped to app */ /* Scrollbars — scoped to .app, plus every portal root that renders outside
.app { it (createPortal(..., document.body)) and would otherwise fall back to
the browser's default light-on-dark scrollbar: Modal, Select/MultiSelect's
floating menu, and DataTable's column-visibility picker. */
.app,
.modal,
.select-menu,
.dt-col-picker {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
} }
.app ::-webkit-scrollbar { .app ::-webkit-scrollbar,
.modal ::-webkit-scrollbar,
.select-menu::-webkit-scrollbar,
.dt-col-picker::-webkit-scrollbar {
width: var(--scrollbar-width); width: var(--scrollbar-width);
height: var(--scrollbar-width); height: var(--scrollbar-width);
} }
.app ::-webkit-scrollbar-track { .app ::-webkit-scrollbar-track,
.modal ::-webkit-scrollbar-track,
.select-menu::-webkit-scrollbar-track,
.dt-col-picker::-webkit-scrollbar-track {
background: var(--scrollbar-track); background: var(--scrollbar-track);
} }
.app ::-webkit-scrollbar-thumb { .app ::-webkit-scrollbar-thumb,
.modal ::-webkit-scrollbar-thumb,
.select-menu::-webkit-scrollbar-thumb,
.dt-col-picker::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb); background-color: var(--scrollbar-thumb);
border-radius: var(--scrollbar-radius); border-radius: var(--scrollbar-radius);
} }
.app ::-webkit-scrollbar-thumb:hover { .app ::-webkit-scrollbar-thumb:hover,
.modal ::-webkit-scrollbar-thumb:hover,
.select-menu::-webkit-scrollbar-thumb:hover,
.dt-col-picker::-webkit-scrollbar-thumb:hover {
background-color: var(--color-border-strong); background-color: var(--color-border-strong);
} }