new scroll bar

web/src/components/layouts/RootProvider/index.tsx

@@ -18,6 +18,27 @@ const RootProvider: FC<CustomAppProps> = ({ pageProps, Component }) => {
 				colorScheme: 'dark',
 				fontFamily: `'DM Sans', sans-serif`,
 				headings: { fontFamily: 'Greycliff CF, sans-serif' },
+				// thin scrollbars
+				globalStyles: (theme) => ({
+					scrollbarWidth: 'thin',
+					scrollbarColor: `${theme.colors.dark[5]} ${theme.colors.dark[7]}`,
+					'::-webkit-scrollbar': {
+						width: 8,
+					},
+					'::webkit-scrollbar-track': {
+						background: theme.colors.dark[5],
+					},
+					'::-webkit-scrollbar-thumb': {
+						background: theme.colors.dark[3],
+						borderRadius: 10,
+					},
+					'::-webkit-scrollbar-thumb:hover': {
+						background: theme.colors.dark[4],
+					},
+					'::-webkit-scrollbar-corner': {
+						background: 'transparent',
+					},
+				}),
 			}}
 		>
 			<QueryClientProvider client={queryClient}>

web/src/components/pages/GalleryPage/PreviewCard.tsx

@@ -57,17 +57,25 @@ const PreviewCard: FC<{
 				spacing={0}
 				p="xl"
 				justify="space-between"
-				sx={(t) => ({
+				sx={(theme) => ({
 					overflow: 'scroll',
-					border: `1px solid ${t.colors.dark[4]}`,
-					borderRadius: t.radius.md,
-					boxShadow: t.shadows.sm,
+					border: `1px solid ${theme.colors.dark[4]}`,
+					borderRadius: theme.radius.md,
+					boxShadow: theme.shadows.sm,
 					maxHeight: 500,
-					'&::-webkit-scrollbar': {
-						display: 'none',
-					},
 					msOverflowStyle: 'none',
-					scrollbarWidth: 'none',
+					scrollbarWidth: 'thin',
+					scrollbarColor: `${theme.colors.dark[5]} ${theme.colors.dark[7]}`,
+					'::-webkit-scrollbar': {
+						width: 8,
+					},
+					'::webkit-scrollbar-track': {
+						background: theme.colors.dark[7],
+					},
+					'::-webkit-scrollbar-thumb': {
+						background: theme.colors.dark[5],
+						borderRadius: 8,
+					},
 				})}
 			>
 				<Flex