From 51bee05a6040ace0dbc3545f97bd241da0852c70 Mon Sep 17 00:00:00 2001
From: Ameer Al Ashhab <33054370+ameer2468@users.noreply.github.com>
Date: Wed, 9 Oct 2024 23:57:48 +0300
Subject: [PATCH] [ENG-1925] Fix windows scroll (#2756)

* Fix scroll on windows

* use a different class
---
 interface/app/$libraryId/Explorer/index.tsx       | 10 ++++++++--
 interface/app/$libraryId/search/SearchOptions.tsx |  4 ++--
 interface/app/style.scss                          |  8 ++++----
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/index.tsx b/interface/app/$libraryId/Explorer/index.tsx
index 22243db1f..3dcb19261 100644
--- a/interface/app/$libraryId/Explorer/index.tsx
+++ b/interface/app/$libraryId/Explorer/index.tsx
@@ -7,7 +7,7 @@ import {
 	useRspcLibraryContext,
 	useSelector
 } from '@sd/client';
-import { useShortcut } from '~/hooks';
+import { useOperatingSystem, useShortcut } from '~/hooks';
 
 import { useTopBarContext } from '../TopBar/Context';
 import { useExplorerContext } from './Context';
@@ -45,6 +45,7 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 		s.showInspector,
 		s.isTagAssignModeActive
 	]);
+	const isWindows = useOperatingSystem() === 'windows';
 
 	const showPathBar = explorer.showPathBar && layoutStore.showPathBar;
 	const rspc = useRspcLibraryContext();
@@ -95,6 +96,8 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 					className="explorer-scroll explorer-inspector-scroll flex flex-1 flex-col overflow-x-hidden"
 					style={
 						{
+							'--scrollbar-width': isWindows ? '10px' : '6px',
+							'--scrollbar-height': isWindows ? '10px' : '6px',
 							'--scrollbar-margin-top': `${topBar.topBarHeight}px`,
 							'--scrollbar-margin-bottom': `${showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : 0}px`,
 							'paddingTop': topBar.topBarHeight,
@@ -133,7 +136,10 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 
 			{showInspector && (
 				<Inspector
-					className={clsx('no-scrollbar absolute right-1.5 top-0 pb-3 pl-3 pr-1.5')}
+					className={clsx(
+						'no-scrollbar absolute top-0 pb-3 pl-3 pr-1.5',
+						isWindows ? 'right-3' : 'right-1.5'
+					)}
 					style={{
 						paddingTop: topBar.topBarHeight + 12,
 						bottom: showPathBar
diff --git a/interface/app/$libraryId/search/SearchOptions.tsx b/interface/app/$libraryId/search/SearchOptions.tsx
index 5f1276818..ecd521232 100644
--- a/interface/app/$libraryId/search/SearchOptions.tsx
+++ b/interface/app/$libraryId/search/SearchOptions.tsx
@@ -82,7 +82,7 @@ export const SearchOptionSubMenu = (
 					<SearchOptionItemInternals {...props}>{props.name}</SearchOptionItemInternals>
 				</ContextMenuDivItem>
 			}
-			className={clsx(MENU_STYLES, 'explorer-scroll -mt-1.5 max-h-80', props.className)}
+			className={clsx(MENU_STYLES, 'default-scroll -mt-1.5 max-h-80', props.className)}
 		>
 			{props.children}
 		</DropdownMenu.SubMenu>
@@ -237,7 +237,7 @@ function AddFilterButton() {
 					onKeyDown={(e) => e.stopPropagation()}
 					className={clsx(
 						MENU_STYLES,
-						'explorer-scroll max-h-[80vh] min-h-[100px] min-w-[200px] max-w-fit'
+						'default-scroll max-h-[80vh] min-h-[100px] min-w-[200px] max-w-fit'
 					)}
 					trigger={
 						<Button className="flex flex-row gap-1" size="xs" variant="dotted">
diff --git a/interface/app/style.scss b/interface/app/style.scss
index a71d6123b..3d6940b2f 100644
--- a/interface/app/style.scss
+++ b/interface/app/style.scss
@@ -113,8 +113,8 @@ body {
 
 .explorer-scroll {
 	&::-webkit-scrollbar {
-		height: 6px;
-		width: 6px;
+		height: var(--scrollbar-height);
+		width: var(--scrollbar-width);
 	}
 	&::-webkit-scrollbar-track {
 		@apply rounded-[6px] bg-transparent;
@@ -129,13 +129,13 @@ body {
 .default-scroll {
 	&::-webkit-scrollbar {
 		height: 6px;
-		width: 8px;
+		width: 6px;
 	}
 	&::-webkit-scrollbar-track {
 		@apply rounded-[6px] bg-transparent;
 	}
 	&::-webkit-scrollbar-thumb {
-		@apply rounded-[6px] bg-app-box;
+		@apply rounded-[6px] bg-app-explorerScrollbar;
 	}
 }
 .page-scroll {