[ENG-1925] Fix windows scroll (#2756)

* Fix scroll on windows * use a different class
spacedriveapp · Oct 9, 2024 · 51bee05 · 51bee05
1 parent d0dc8bb
commit 51bee05
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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 {