Fix mobile tab header and swipe behavior

frontend/src/components/SwipeTabs.tsx

@@ -21,6 +21,7 @@ type SwipeTabsProps<T extends string | number> = {
     swipeDisabled?: boolean;
     threshold?: number;
     renderWindow?: number;
+    scrollToTopOnChange?: boolean;
 };
 
 const DRAG_START_DISTANCE = 3;
@@ -55,7 +56,8 @@ export function SwipeTabs<T extends string | number>({
     panelClassName,
     swipeDisabled = false,
     threshold = DEFAULT_THRESHOLD,
-    renderWindow = DEFAULT_RENDER_WINDOW
+    renderWindow = DEFAULT_RENDER_WINDOW,
+    scrollToTopOnChange = true
 }: SwipeTabsProps<T>) {
     const containerRef = useRef<HTMLDivElement>(null);
     const trackRef = useRef<HTMLDivElement>(null);
@@ -77,6 +79,7 @@ export function SwipeTabs<T extends string | number>({
     const pendingIndexRef = useRef<number | null>(null);
     const isAnimatingRef = useRef(false);
     const needsResetRef = useRef(false);
+    const hasScrolledRef = useRef(false);
     const dragRef = useRef({
         pointerId: null as number | null,
         touchId: null as number | null,
@@ -164,6 +167,16 @@ export function SwipeTabs<T extends string | number>({
         };
     }, []);
 
+    useEffect(() => {
+        if (!scrollToTopOnChange) return;
+        if (!hasScrolledRef.current) {
+            hasScrolledRef.current = true;
+            return;
+        }
+        if (typeof window === 'undefined') return;
+        window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+    }, [activeTab, scrollToTopOnChange]);
+
     const resetToIndex = useCallback(
         (index: number) => {
             displayIndexRef.current = index;