fix(scrollbar): theme scrollbars inside portal-rendered elements
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:
@@ -332,27 +332,45 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Scrollbars — scoped to app */
|
||||
.app {
|
||||
/* Scrollbars — scoped to .app, plus every portal root that renders outside
|
||||
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-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);
|
||||
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);
|
||||
}
|
||||
|
||||
.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);
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user