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({ />