Merge pull request #28 from cfahlgren1/add-horizontal-scrollbar

horizontal scroll with mouse
cfahlgren1 · Jul 24, 2024 · 028385d · 028385d
2 parents 7ddaded + 2923290
commit 028385d
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/components/query-input.tsx b/components/query-input.tsx
@@ -41,6 +41,18 @@ const QueryInput: React.FC<QueryInputProps> = React.memo(
             setQuery(newQuery)
         }
 
+        // allow horizontal scrolling with mouse
+        const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
+            const container = event.currentTarget
+            const scrollAmount = event.deltaY
+
+            requestAnimationFrame(() => {
+                container.scrollLeft += scrollAmount
+            })
+
+            event.preventDefault()
+        }
+
         return (
             <>
                 <CodeMirror
@@ -67,21 +79,23 @@ const QueryInput: React.FC<QueryInputProps> = React.memo(
                             Tables
                         </label>
                         <div
-                            className="overflow-x-scroll pb-2"
+                            className="overflow-x-auto pb-2"
+                            onWheel={handleWheel}
                             style={{
                                 scrollbarWidth: "none",
                                 msOverflowStyle: "none",
+                                WebkitOverflowScrolling: "touch",
                                 maskImage:
                                     "linear-gradient(to right, transparent, black 8px, black calc(100% - 8px), transparent)",
                                 WebkitMaskImage:
                                     "linear-gradient(to right, transparent, black 8px, black calc(100% - 8px), transparent)"
                             }}>
-                            <div className="flex gap-1">
+                            <div className="flex gap-1 pb-2 whitespace-nowrap">
                                 {views.map((view) => (
                                     <Badge
                                         key={view.view_name}
                                         variant="secondary"
-                                        className="text-xs cursor-pointer whitespace-nowrap"
+                                        className="text-xs cursor-pointer"
                                         onClick={() =>
                                             handleTableClick(view.view_name)
                                         }>