From 38750ba951c32773752232cd95893c4b02728d48 Mon Sep 17 00:00:00 2001
From: bonamin <just_big_v@yahoo.com>
Date: Mon, 21 Sep 2026 18:22:30 +0300
Subject: [PATCH] fix(scrollbar): theme scrollbars inside portal-rendered
 elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/styles/global.css | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 1e655f3..9797f1e 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -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);
 }