feat: improve scrollbar position

fingerprintjs · Jun 13, 2024 · 98589ec · 98589ec
1 parent 4c6f33d
commit 98589ec
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 deletions.
diff --git a/src/client/components/common/CodeSnippet/CodeSnippet.tsx b/src/client/components/common/CodeSnippet/CodeSnippet.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { CSSProperties, 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';
@@ -28,32 +28,42 @@ export function CodeSnippet({
 }: PropsWithChildren<CodeSnippetProps>) {
   const hasDarkMode = false;
 
-  const PRISM_CUSTOM_STYLE = {
-    backgroundColor: '#FFF',
-    padding: '16px 12px',
-    borderRadius: '8px',
-    fontFamily: 'Roboto Mono, monospace',
-    fontSize: '14px',
-    margin: '0',
+  const PRISM_CUSTOM_STYLE: CSSProperties = {
+    padding: '16px',
+    fontFamily: 'JetBrains Mono, monospace',
+    fontSize: '16px',
     overflow: 'auto',
-    border: '1px solid #D0D0D0',
+    marginTop: '0',
+    marginBottom: '0',
+    marginLeft: '0',
+    marginRight: '0',
+    // lineHeight: '205%',
     height: '446px',
   };
   const PRISM_CODE_TAG_PROPS = { style: { color: '#c92c2c', font: 'inherit' as const } };
 
   return (
-    <PrismAsyncLight
-      showLineNumbers={showLineNumbers}
-      lineNumberStyle={PRISM_LINE_NUMBER_STYLE}
-      wrapLines
-      language={language}
-      style={hasDarkMode ? darkTheme : lightTheme}
-      customStyle={PRISM_CUSTOM_STYLE}
-      codeTagProps={PRISM_CODE_TAG_PROPS}
-      className={classnames(styles.snippet, className)}
-      data-testid={dataTestId}
+    <div
+      style={{
+        padding: '3px',
+        backgroundColor: '#FFF',
+        borderRadius: '8px',
+        border: '1px solid #D0D0D0',
+      }}
     >
-      {children}
-    </PrismAsyncLight>
+      <PrismAsyncLight
+        showLineNumbers={showLineNumbers}
+        lineNumberStyle={PRISM_LINE_NUMBER_STYLE}
+        wrapLines
+        language={language}
+        style={hasDarkMode ? darkTheme : lightTheme}
+        customStyle={PRISM_CUSTOM_STYLE}
+        codeTagProps={PRISM_CODE_TAG_PROPS}
+        className={classnames(styles.snippet, className)}
+        data-testid={dataTestId}
+      >
+        {children}
+      </PrismAsyncLight>
+    </div>
   );
 }
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
@@ -168,12 +168,14 @@ img {
   vertical-align: middle;
 }
 
+/** Scrollbar styles */
+/* This works on Firefox */
 body {
   scrollbar-width: thin;
   scrollbar-color: #c1c1c1 transparent;
 }
 
-// /* Works on Chrome, Edge, and Safari */
+/* This Works on Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   width: 6px;
   height: 6px;