From 891c1f5cf14a70cfd06eac2c8c45a98589412cf2 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 25 Mar 2025 22:04:01 -0700
Subject: [PATCH] fix(ui): scrollbar styling across all browsers

---
 sim/app/globals.css                           | 47 +++++++++++++++++++
 .../sub-block/components/long-input.tsx       |  2 +-
 .../sub-block/components/short-input.tsx      |  2 +-
 .../components/sub-block/components/table.tsx |  2 +-
 sim/app/w/[id]/workflow.tsx                   |  2 +-
 5 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/sim/app/globals.css b/sim/app/globals.css
index 233bbfea67..a3c80b587b 100644
--- a/sim/app/globals.css
+++ b/sim/app/globals.css
@@ -33,6 +33,12 @@
     --ring: 222.2 84% 4.9%;
 
     --radius: 0.5rem;
+    
+    /* Scrollbar Custom Properties */
+    --scrollbar-track: 0 0% 85%;
+    --scrollbar-thumb: 0 0% 65%;
+    --scrollbar-thumb-hover: 0 0% 55%;
+    --scrollbar-size: 8px;
   }
 
   .dark {
@@ -63,6 +69,11 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    
+    /* Dark Mode Scrollbar Custom Properties */
+    --scrollbar-track: 217.2 32.6% 17.5%;
+    --scrollbar-thumb: 217.2 32.6% 30%;
+    --scrollbar-thumb-hover: 217.2 32.6% 40%;
   }
 }
 
@@ -76,6 +87,32 @@
     @apply bg-background text-foreground;
     overscroll-behavior-x: none;
   }
+  
+  /* Global Scrollbar Styling */
+  ::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+  }
+  
+  ::-webkit-scrollbar-track {
+    background-color: hsl(var(--scrollbar-track));
+    border-radius: var(--radius);
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--scrollbar-thumb));
+    border-radius: var(--radius);
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--scrollbar-thumb-hover));
+  }
+  
+  /* For Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--scrollbar-thumb)) hsl(var(--scrollbar-track));
+  }
 }
 
 /* Custom Animations */
@@ -101,6 +138,16 @@
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 300ms;
   }
+  
+  /* Custom Scrollbar Utility Classes */
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 /* Dark mode error badge styling */
diff --git a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/long-input.tsx b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/long-input.tsx
index 70c98ca071..94ae2d04b2 100644
--- a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/long-input.tsx
+++ b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/long-input.tsx
@@ -195,7 +195,7 @@ export function LongInput({
       />
       <div
         ref={overlayRef}
-        className="absolute inset-0 pointer-events-none px-3 py-2 overflow-auto whitespace-pre-wrap break-words scrollbar-none text-sm bg-transparent box-border"
+        className="absolute inset-0 pointer-events-none px-3 py-2 overflow-auto whitespace-pre-wrap break-words text-sm bg-transparent box-border"
         style={{ width: 'calc(100% - 2px)' }}
       >
         {formatDisplayText(value?.toString() ?? '')}
diff --git a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/short-input.tsx b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/short-input.tsx
index b6be397358..caba7d43de 100644
--- a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/short-input.tsx
+++ b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/short-input.tsx
@@ -310,7 +310,7 @@ export function ShortInput({
       />
       <div
         ref={overlayRef}
-        className="absolute inset-0 pointer-events-none px-3 flex items-center overflow-x-auto whitespace-pre scrollbar-none text-sm bg-transparent"
+        className="absolute inset-0 pointer-events-none px-3 flex items-center overflow-x-auto whitespace-pre text-sm bg-transparent"
       >
         {password && !isFocused
           ? '•'.repeat(value?.toString().length ?? 0)
diff --git a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx
index b29dd274ef..2cd885ac90 100644
--- a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx
+++ b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx
@@ -147,7 +147,7 @@ export function Table({ columns, blockId, subBlockId }: TableProps) {
             }}
             className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-transparent caret-foreground placeholder:text-muted-foreground/50"
           />
-          <div className="absolute inset-0 pointer-events-none px-3 flex items-center overflow-x-auto whitespace-pre scrollbar-none text-sm bg-transparent">
+          <div className="absolute inset-0 pointer-events-none px-3 flex items-center overflow-x-auto whitespace-pre text-sm bg-transparent">
             {formatDisplayText(cellValue)}
           </div>
         </div>
diff --git a/sim/app/w/[id]/workflow.tsx b/sim/app/w/[id]/workflow.tsx
index c1fb2c1035..77726552a3 100644
--- a/sim/app/w/[id]/workflow.tsx
+++ b/sim/app/w/[id]/workflow.tsx
@@ -448,7 +448,7 @@ function WorkflowContent() {
           onDragOver={(e) => e.preventDefault()}
           fitView
           minZoom={0.1}
-          maxZoom={1}
+          maxZoom={1.3}
           panOnScroll
           defaultEdgeOptions={{ type: 'custom' }}
           proOptions={{ hideAttribution: true }}