feat: scrolly scroll

src/app/playground/Playground.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { FunctionComponent } from 'react';
-import { CodeSnippet } from '../../client/components/CodeSnippet';
+import { CodeSnippet } from '../../client/components/common/CodeSnippet/CodeSnippet';
 import dynamic from 'next/dynamic';
 import SignalTable, { TableCellData } from './components/SignalTable';
 import BotDetectionResult from './components/BotDetectionResult';

src/client/components/common/CodeSnippet/CodeSnippet.module.scss

@@ -0,0 +1 @@
+

src/client/components/CodeSnippet.tsx → src/client/components/common/CodeSnippet/CodeSnippet.tsx

@@ -2,6 +2,8 @@ import { PropsWithChildren } from 'react';
 import { PrismAsyncLight } from 'react-syntax-highlighter';
 import lightTheme from 'react-syntax-highlighter/dist/cjs/styles/prism/coy';
 import darkTheme from 'react-syntax-highlighter/dist/cjs/styles/prism/coldark-dark';
+import styles from './CodeSnippet.module.scss';
+import classnames from 'classnames';
 
 export interface CodeSnippetProps {
   language: string;
@@ -48,7 +50,7 @@ export function CodeSnippet({
       style={hasDarkMode ? darkTheme : lightTheme}
       customStyle={PRISM_CUSTOM_STYLE}
       codeTagProps={PRISM_CODE_TAG_PROPS}
-      className={className}
+      className={classnames(styles.snippet, className)}
       data-testid={dataTestId}
     >
       {children}

src/styles/global-styles.scss

@@ -167,3 +167,25 @@ button {
 img {
   vertical-align: middle;
 }
+
+body {
+  scrollbar-width: thin;
+  scrollbar-color: #c1c1c1 transparent;
+}
+
+// /* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 6px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 6px;
+}