From 935ccea85e61af435ef9e501049699fd20a4e073 Mon Sep 17 00:00:00 2001
From: Dominik Koch <dominik@koch-bautechnik.de>
Date: Mon, 21 Jul 2025 14:27:27 +0200
Subject: [PATCH 1/2] fix: switch to alpha

---
 apps/web/src/components/landing/hero.tsx | 2 +-
 apps/web/src/components/onboarding.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index b905bbde..0da22b18 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -70,7 +70,7 @@ export function Hero() {
               size="lg"
               className="px-6 h-11 text-base bg-foreground"
             >
-              Try early beta
+              Try early alpha
               <ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
             </Button>
           </Link>
diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx
index 80b5f99c..87cd0115 100644
--- a/apps/web/src/components/onboarding.tsx
+++ b/apps/web/src/components/onboarding.tsx
@@ -32,7 +32,7 @@ export function Onboarding() {
         return (
           <div className="space-y-5">
             <div className="space-y-3">
-              <Title title="Welcome to OpenCut Beta! 🎉" />
+              <Title title="Welcome to OpenCut alpha! 🎉" />
               <Description description="You're among the first to try OpenCut - the fully open source CapCut alternative." />
             </div>
             <NextButton onClick={handleNext}>Next</NextButton>
@@ -42,7 +42,7 @@ export function Onboarding() {
         return (
           <div className="space-y-5">
             <div className="space-y-3">
-              <Title title="⚠️ This is a super early beta!" />
+              <Title title="⚠️ This is a super early alpha!" />
               <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
               <Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
             </div>

From d27f05be92bc67a1db0e0fb1ab6031b7881c4f8c Mon Sep 17 00:00:00 2001
From: daniel-inderos <daniel.inderos@icloud.com>
Date: Mon, 21 Jul 2025 11:23:46 -0600
Subject: [PATCH 2/2] Fix timeline scrolling

---
 apps/web/src/components/editor/timeline.tsx | 18 +++++++++++++++---
 apps/web/src/components/ui/scroll-area.tsx  |  1 +
 apps/web/src/hooks/use-timeline-zoom.ts     |  6 ++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 6e8c453c..0b5bcf57 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.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,7 @@ 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">
               <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..d985443f 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -18,6 +18,7 @@ const ScrollArea = React.forwardRef<
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
+    <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
   }, []);