diff options
| -rw-r--r-- | apps/web/src/components/editor/timeline.tsx | 13 |
1 files changed, 8 insertions, 5 deletions
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index b95f9839..d6a6d627 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -299,9 +299,13 @@ export function Timeline() { };
const handleWheel = (e: React.WheelEvent) => {
- e.preventDefault();
- const delta = e.deltaY > 0 ? -0.05 : 0.05;
- setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));
+ // Only zoom if user is using pinch gesture (ctrlKey or metaKey is true)
+ if (e.ctrlKey || e.metaKey) {
+ e.preventDefault();
+ const delta = e.deltaY > 0 ? -0.05 : 0.05;
+ setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));
+ }
+ // Otherwise, allow normal scrolling
};
const dragProps = {
@@ -620,8 +624,7 @@ export function Timeline() { className="relative cursor-pointer select-none"
style={{
width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
- minHeight:
- tracks.length > 0 ? `${tracks.length * 60}px` : "200px",
+ minHeight: '600px', // Always at least 600px tall for easy empty area clicking
}}
onClick={handleTimelineAreaClick}
onMouseDown={handleTimelineMouseDown}
|