feat: scrollbar styles via modernizr (#488)

Arize-ai · Mar 31, 2023 · 38bb85f · 38bb85f
1 parent 8048c16
commit 38bb85f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/app/src/GlobalStyles.tsx b/app/src/GlobalStyles.tsx
@@ -27,6 +27,30 @@ export function GlobalStyles() {
           margin-block-start: 0;
         }
 
+        /* this css class is added to html via modernizr @see modernizr.js */
+        .no-hiddenscroll {
+          /* Works on Firefox */
+          * {
+            scrollbar-width: thin;
+            scrollbar-color: ${theme.colors.gray300} ${theme.colors.gray500};
+          }
+
+          /* Works on Chrome, Edge, and Safari */
+          *::-webkit-scrollbar {
+            width: 14px;
+          }
+
+          *::-webkit-scrollbar-track {
+            background: ${theme.colors.gray700};
+          }
+
+          *::-webkit-scrollbar-thumb {
+            background-color: ${theme.colors.gray900};
+            border-radius: 8px;
+            border: 1px solid ${theme.colors.gray300};
+          }
+        }
+
         :root {
           --px-blue-color: ${theme.colors.arizeBlue};
           --px-light-blue-color: ${theme.colors.arizeLightBlue};

diff --git a/app/static/index.html b/app/static/index.html
@@ -12,6 +12,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
     />
+    <script src="/modernizr.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/static/modernizr.js b/app/static/modernizr.js