diff --git a/frontend/src/components/SwipeTabs.tsx b/frontend/src/components/SwipeTabs.tsx
index b4589e9..631c76e 100644
--- a/frontend/src/components/SwipeTabs.tsx
+++ b/frontend/src/components/SwipeTabs.tsx
@@ -239,10 +239,22 @@ export function SwipeTabs<T extends string | number>({
         node.classList.toggle('swipe-tabs--dragging', value);
     }, []);
 
+    const cancelAnimationForDrag = useCallback(() => {
+        if (!isAnimatingRef.current) return;
+        const pendingIndex = pendingIndexRef.current;
+        pendingIndexRef.current = null;
+        isAnimatingRef.current = false;
+        needsResetRef.current = false;
+        const targetIndex = pendingIndex ?? activeIndex;
+        resetToIndex(targetIndex);
+    }, [activeIndex, resetToIndex]);
+
     const startDrag = useCallback(
         (x: number, y: number, pointerId: number | null, touchId: number | null) => {
             if (swipeDisabled || tabs.length <= 1) return;
-            if (isAnimatingRef.current) return;
+            if (isAnimatingRef.current) {
+                cancelAnimationForDrag();
+            }
             measureWidth();
             dragRef.current.pointerId = pointerId;
             dragRef.current.touchId = touchId;
@@ -253,7 +265,7 @@ export function SwipeTabs<T extends string | number>({
             dragRef.current.isDragging = false;
             dragOffsetRef.current = 0;
         },
-        [measureWidth, swipeDisabled, tabs.length]
+        [cancelAnimationForDrag, measureWidth, swipeDisabled, tabs.length]
     );
 
     const updateDrag = useCallback(