From c33197752b1abe8ebeacb083e440d91c3a32d8c8 Mon Sep 17 00:00:00 2001
From: rishikanthc <r3chandr@ucsd.edu>
Date: Fri, 12 Dec 2025 14:57:03 -0800
Subject: [PATCH] fix: disable click-to-seek handlers on mobile devices

- Prevent interference with native text selection on touch devices
- Remove click listeners for timestamps/words when isMobile is true
---
 .../src/components/transcript/TranscriptView.tsx       | 10 ++++++----
 .../components/audio-detail/TranscriptSection.tsx      |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/frontend/src/components/transcript/TranscriptView.tsx b/web/frontend/src/components/transcript/TranscriptView.tsx
index aeed1b7a..6d02f25a 100644
--- a/web/frontend/src/components/transcript/TranscriptView.tsx
+++ b/web/frontend/src/components/transcript/TranscriptView.tsx
@@ -1,6 +1,7 @@
 import { forwardRef, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { useKaraokeHighlight, computeWordOffsets, findActiveWordIndex } from '@/features/transcription/hooks/useKaraokeHighlight';
 import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/hooks/use-mobile';
 import type { Note } from '@/types/note';
 
 // Helper for cross-browser caret position
@@ -71,6 +72,7 @@ export const TranscriptView = forwardRef<HTMLDivElement, TranscriptViewProps>(({
 
     const containerRef = useRef<HTMLDivElement>(null);
     const [isModifierPressed, setIsModifierPressed] = useState(false);
+    const isMobile = useIsMobile();
 
     // Use CSS Highlight API for Compact Mode
     // Note: We only use this hook when in compact mode to save resources
@@ -134,10 +136,10 @@ export const TranscriptView = forwardRef<HTMLDivElement, TranscriptViewProps>(({
         return (
             <div
                 ref={containerRef}
-                onClick={handleWordClick}
+                onClick={isMobile ? undefined : handleWordClick}
                 className={cn(
                     "text-lg leading-relaxed text-carbon-700 dark:text-carbon-300 whitespace-pre-wrap font-reading selection:bg-orange-500/30 transition-colors duration-200 select-text",
-                    isModifierPressed ? 'cursor-pointer hover:text-carbon-900 dark:hover:text-carbon-100' : 'cursor-text'
+                    !isMobile && isModifierPressed ? 'cursor-pointer hover:text-carbon-900 dark:hover:text-carbon-100' : 'cursor-text'
                 )}
             >
                 {/* The hook returns the built text string, so we just render it directly */}
@@ -268,10 +270,10 @@ export const TranscriptView = forwardRef<HTMLDivElement, TranscriptViewProps>(({
                         {/* Text */}
                         <div
                             ref={(el) => { segmentRefs.current[i] = el; }}
-                            onClick={(e) => handleExpandedClick(e, i)}
+                            onClick={isMobile ? undefined : (e) => handleExpandedClick(e, i)}
                             className={cn(
                                 "flex-grow text-base text-primary leading-relaxed whitespace-pre-wrap font-reading transition-colors duration-200 select-text",
-                                isModifierPressed ? 'cursor-pointer hover:text-carbon-900 dark:hover:text-carbon-100' : 'cursor-text'
+                                !isMobile && isModifierPressed ? 'cursor-pointer hover:text-carbon-900 dark:hover:text-carbon-100' : 'cursor-text'
                             )}
                         >
                             {segment.fullText || segment.text}
diff --git a/web/frontend/src/features/transcription/components/audio-detail/TranscriptSection.tsx b/web/frontend/src/features/transcription/components/audio-detail/TranscriptSection.tsx
index 3568ceb8..edcef61a 100644
--- a/web/frontend/src/features/transcription/components/audio-detail/TranscriptSection.tsx
+++ b/web/frontend/src/features/transcription/components/audio-detail/TranscriptSection.tsx
@@ -99,8 +99,8 @@ export function TranscriptSection({
         }
     }, [currentWordIndex, autoScrollEnabled]);
 
-    // Click to seek handler
     useEffect(() => {
+        if (isMobile) return; // Disable click-to-seek globally on mobile to prevent selection interference
         const el = transcriptRef.current;
         if (!el) return;
         const onClick = (e: MouseEvent) => {