From 6101ee62be9cc0148c306749c4af9165575e9517 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 1 Feb 2024 19:20:54 +0300
Subject: [PATCH] Fixed native scrollbars in Chrome 121 (#4491)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_layouts.scss         | 9 +++++++++
 packages/theme/styles/global.scss           | 2 +-
 packages/theme/styles/popups.scss           | 3 +++
 packages/ui/src/components/ScrollBox.svelte | 1 +
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 97942a37fd..55ddcb22f1 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -924,9 +924,17 @@ a.no-line {
 
 .overflow-x-auto { overflow-x: auto; }
 .overflow-y-auto { overflow-y: auto; }
+.overflow-x-auto,
+.overflow-y-auto { scrollbar-width: thin; }
+
 .whitespace-nowrap { white-space: nowrap; }
 
 /* Scrollbars */
+.scroll-m-0,
+.scroll-m-10,
+.scroll-bg-accent-color,
+.scroll-divider-color { scrollbar-width: thin; }
+
 .scroll-m-0::-webkit-scrollbar-track { margin: 0; }
 .scroll-m-10::-webkit-scrollbar-track { margin: 2.5rem; }
 
@@ -960,6 +968,7 @@ a.no-line {
 .background-primary-color { background-color: var(--primary-button-default); }
 .background-content-accent-color { background-color: var(--accent-color); }
 .background-comp-header-color { background-color: var(--theme-comp-header-color) !important; }
+.background-navpanel-color { background-color: var(--theme-navpanel-color) !important; }
 
 .content-trans-color { color: var(--theme-trans-color); }
 .content-darker-color { color: var(--theme-darker-color); }
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 6a92bf7f74..8463aaa8f6 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -71,7 +71,7 @@
 * {
   box-sizing: border-box;
   touch-action: manipulation;
-  scrollbar-color: var(--theme-comp-header-color) var(--theme-back-color);
+  scrollbar-color: var(--theme-navpanel-divider) transparent;
   scrollbar-width: none;
   --body-font-size: .875rem;
   --status-bar-height: 36px;
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 34cce0f224..db23c6f865 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -167,6 +167,7 @@
     height: max-content;
     overflow-x: hidden;
     overflow-y: auto;
+    scrollbar-width: thin;
 
     &::-webkit-scrollbar { width: 0; }
     .box {
@@ -330,6 +331,8 @@
     min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
+    scrollbar-width: thin;
+
     &::-webkit-scrollbar-track { margin: 0; }
     &::-webkit-scrollbar-thumb {
       background-color: var(--scrollbar-bar-color);
diff --git a/packages/ui/src/components/ScrollBox.svelte b/packages/ui/src/components/ScrollBox.svelte
index 7a23f89b7c..1139537f4a 100644
--- a/packages/ui/src/components/ScrollBox.svelte
+++ b/packages/ui/src/components/ScrollBox.svelte
@@ -50,6 +50,7 @@
     overflow-y: hidden;
     margin-right: 0;
     margin-bottom: -0.75rem;
+    scrollbar-width: thin;
 
     .box {
       position: absolute;