Add custom scrollbar styles for widows OSs (#716)

comet-ml · Nov 25, 2024 · 177ae1b · 177ae1b
1 parent 5ea57cd
commit 177ae1b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 0 deletions.
diff --git a/apps/opik-frontend/src/components/App.tsx b/apps/opik-frontend/src/components/App.tsx
@@ -5,6 +5,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { QueryParamProvider } from "use-query-params";
 import { WindowHistoryAdapter } from "use-query-params/adapters/window";
+import useCustomScrollbarClass from "@/hooks/useCustomScrollbarClass";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -15,6 +16,8 @@ const queryClient = new QueryClient({
 });
 
 function App() {
+  useCustomScrollbarClass();
+
   return (
     <QueryClientProvider client={queryClient}>
       <QueryParamProvider adapter={WindowHistoryAdapter}>

diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/FeedbackScoresCell.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/FeedbackScoresCell.tsx
@@ -20,6 +20,7 @@ const FeedbackScoresCell = (context: CellContext<unknown, unknown>) => {
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
+      className="py-0"
     >
       <div
         className={cn(

diff --git a/apps/opik-frontend/src/hooks/useCustomScrollbarClass.ts b/apps/opik-frontend/src/hooks/useCustomScrollbarClass.ts
@@ -0,0 +1,10 @@
+export default function useCustomScrollbarClass() {
+  const userAgent = window.navigator.userAgent.toLowerCase();
+
+  if (/(win32|win64|windows|wince)/i.test(userAgent)) {
+    document.body.classList.add("comet-custom-scrollbar");
+    if (userAgent.includes("firefox")) {
+      document.body.classList.add("firefox");
+    }
+  }
+}
diff --git a/apps/opik-frontend/src/main.scss b/apps/opik-frontend/src/main.scss
@@ -207,4 +207,30 @@
       "Courier New",
       monospace;
   }
+
+  .comet-custom-scrollbar {
+    &.firefox {
+      scrollbar-color: #babac0 transparent;
+      scrollbar-width: thin;
+    }
+
+    ::-webkit-scrollbar {
+      background-color: #fff;
+      width: 16px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: #fff;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #babac0;
+      border-radius: 16px;
+      border: 4px solid #fff;
+    }
+
+    ::-webkit-scrollbar-button {
+      display: none;
+    }
+  }
 }