From f2f523c94ce8a5937ba1341cc19773b406eeefaf Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 4 May 2024 13:23:57 +0530
Subject: [PATCH] chore: fix scrollbars (#2875) [skip e2e]

---
 packages/styles/src/Styles/_scrollbar.scss          | 13 +++++--------
 .../ApplicationGroupView/ApplicationGroupView.tsx   |  4 ++++
 .../Components/ContentListView/ContentList.tsx      |  4 ++--
 packages/web/src/javascripts/Constants/Constants.ts |  2 ++
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/styles/src/Styles/_scrollbar.scss b/packages/styles/src/Styles/_scrollbar.scss
index 0122d9fd0..ddab5c41c 100644
--- a/packages/styles/src/Styles/_scrollbar.scss
+++ b/packages/styles/src/Styles/_scrollbar.scss
@@ -6,7 +6,7 @@
   $thumb-width: 4px;
 
   ::-webkit-scrollbar {
-    width: 17px;
+    width: 14px;
     height: 18px;
     border-left: none;
   }
@@ -42,13 +42,10 @@
       }
     }
   }
+}
 
+body:not(.chromium),
+.mac-desktop {
   scrollbar-width: thin;
-}
-
-.windows-web,
-.windows-desktop {
-  .md\:hover\:overflow-y-auto {
-    scrollbar-gutter: stable;
-  }
+  scrollbar-color: var(--sn-stylekit-scrollbar-thumb-color) transparent;
 }
diff --git a/packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx b/packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx
index ec4df3941..46bf867f8 100644
--- a/packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx
+++ b/packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx
@@ -6,6 +6,7 @@ import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
 import { ApplicationGroupEvent, ApplicationGroupEventData, DeinitSource } from '@standardnotes/snjs'
 import { getPlatformString, isDesktopApplication } from '@/Utils'
 import DeallocateHandler from '../DeallocateHandler/DeallocateHandler'
+import { IS_CHROME } from '../../Constants/Constants'
 
 type Props = {
   server: string
@@ -77,6 +78,9 @@ class ApplicationGroupView extends Component<Props, State> {
     if (!document.body.classList.contains(platformString)) {
       document.body.classList.add(platformString)
     }
+    if (IS_CHROME) {
+      document.body.classList.add('chromium')
+    }
   }
 
   deinit() {
diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
index f4aeddb13..04e6c5359 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
@@ -82,8 +82,8 @@ const ContentList: FunctionComponent<Props> = ({ application, items, selectedUui
     <div
       className={classNames(
         'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
-        'md:max-h-full md:overflow-y-hidden md:hover:overflow-y-auto pointer-coarse:md:overflow-y-auto',
-        'flex-grow pb-2 md:hover:[overflow-y:_overlay]',
+        'md:max-h-full pointer-coarse:md:overflow-y-auto',
+        'flex-grow pb-2',
       )}
       id={ElementIds.ContentList}
       onScroll={onScroll}
diff --git a/packages/web/src/javascripts/Constants/Constants.ts b/packages/web/src/javascripts/Constants/Constants.ts
index fbbe3af09..0fcd547a0 100644
--- a/packages/web/src/javascripts/Constants/Constants.ts
+++ b/packages/web/src/javascripts/Constants/Constants.ts
@@ -30,6 +30,8 @@ export const SMART_TAGS_FEATURE_NAME = 'Smart Tags'
 export const SYNC_TIMEOUT_DEBOUNCE = 350
 export const SYNC_TIMEOUT_NO_DEBOUNCE = 100
 
+export const IS_CHROME: boolean = /^(?=.*Chrome).*/i.test(navigator.userAgent)
+
 type EditorMetadata = {
   icon: IconType
   subtleIcon?: IconType