From ab82db63465de33a6f482ef5007edb9ea544ad2f Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 21 Jul 2025 21:42:44 +0200
Subject: [PATCH] Merge pull request
 [#395](https://github.com/mazeincoding/AppCut/issues/395)

---
 .../src/components/editor/timeline/index.tsx  | 23 ++++++++++++++++---
 apps/web/src/components/ui/scroll-area.tsx    |  9 ++++++--
 apps/web/src/hooks/use-timeline-zoom.ts       |  6 +++++
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index f9a6cb8c..987215fa 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -878,7 +878,13 @@ export function Timeline() {
           {/* Timeline Ruler */}
           <div
             className="flex-1 relative overflow-hidden h-4"
-            onWheel={handleWheel}
+            onWheel={(e) => {
+              // Check if this is horizontal scrolling - if so, don't handle it here
+              if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+                return; // Let ScrollArea handle horizontal scrolling
+              }
+              handleWheel(e);
+            }}
             onMouseDown={handleSelectionMouseDown}
             onClick={handleTimelineContentClick}
             data-ruler-area
@@ -999,7 +1005,13 @@ export function Timeline() {
           {/* Timeline Tracks Content */}
           <div
             className="flex-1 relative overflow-hidden"
-            onWheel={handleWheel}
+            onWheel={(e) => {
+              // Check if this is horizontal scrolling - if so, don't handle it here
+              if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+                return; // Let ScrollArea handle horizontal scrolling
+              }
+              handleWheel(e);
+            }}
             onMouseDown={(e) => {
               handleTimelineMouseDown(e);
               handleSelectionMouseDown(e);
@@ -1013,7 +1025,12 @@ export function Timeline() {
               containerRef={tracksContainerRef}
               isActive={selectionBox?.isActive || false}
             />
-            <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
+            <ScrollArea
+              className="w-full h-full"
+              ref={tracksScrollRef}
+              type="scroll"
+              showHorizontalScrollbar
+            >
               <div
                 className="relative flex-1"
                 style={{
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index 6b7c3c53..5c9db727 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -7,17 +7,22 @@ import { cn } from "../../lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    type?: "auto" | "always" | "scroll" | "hover";
+    showHorizontalScrollbar?: boolean;
+  }
+>(({ className, children, type, showHorizontalScrollbar, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
+    type={type}
     {...props}
   >
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
+    {showHorizontalScrollbar && <ScrollBar orientation="horizontal" />}
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
diff --git a/apps/web/src/hooks/use-timeline-zoom.ts b/apps/web/src/hooks/use-timeline-zoom.ts
index ce32c9f0..4f5e0af0 100644
--- a/apps/web/src/hooks/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/use-timeline-zoom.ts
@@ -24,6 +24,12 @@ export function useTimelineZoom({
       const delta = e.deltaY > 0 ? -0.15 : 0.15;
       setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));
     }
+    // For horizontal scrolling (when shift is held or horizontal wheel movement),
+    // let the event bubble up to allow ScrollArea to handle it
+    else if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+      // Don't prevent default - let ScrollArea handle horizontal scrolling
+      return;
+    }
     // Otherwise, allow normal scrolling
   }, []);