From 86693a93cb0308b95d6ed2ee6228d2a581501cf6 Mon Sep 17 00:00:00 2001 From: NotYuSheng Date: Sun, 25 Jan 2026 22:44:45 +0800 Subject: [PATCH 1/2] fix: scroll within transcript card instead of entire page Changed scrollIntoView behavior from 'block: center' to 'block: nearest' to ensure active transcript segments scroll within the .transcript-content container rather than scrolling the entire page. Co-Authored-By: Claude Sonnet 4.5 --- frontend/src/components/Transcript/TranscriptSegment.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Transcript/TranscriptSegment.jsx b/frontend/src/components/Transcript/TranscriptSegment.jsx index 2861f12..e34bfff 100644 --- a/frontend/src/components/Transcript/TranscriptSegment.jsx +++ b/frontend/src/components/Transcript/TranscriptSegment.jsx @@ -18,7 +18,7 @@ export default function TranscriptSegment({ if (isActive && segmentRef.current) { segmentRef.current.scrollIntoView({ behavior: 'smooth', - block: 'center', + block: 'nearest', }); } }, [isActive]); From b18f5b57282fcfefdc3c9f6c4dcdfd9d98a39965 Mon Sep 17 00:00:00 2001 From: NotYuSheng Date: Sun, 25 Jan 2026 22:49:07 +0800 Subject: [PATCH 2/2] feat: add accessibility support for reduced motion preference Implemented prefers-reduced-motion media query to respect user's system-wide motion preference settings. Users with motion sensitivity will now get instant scrolling instead of smooth animations. Co-Authored-By: Claude Sonnet 4.5 --- frontend/src/components/Transcript/TranscriptSegment.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Transcript/TranscriptSegment.jsx b/frontend/src/components/Transcript/TranscriptSegment.jsx index e34bfff..441d385 100644 --- a/frontend/src/components/Transcript/TranscriptSegment.jsx +++ b/frontend/src/components/Transcript/TranscriptSegment.jsx @@ -16,8 +16,11 @@ export default function TranscriptSegment({ // Auto-scroll to active segment useEffect(() => { if (isActive && segmentRef.current) { + // Respect user's motion preference for accessibility + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + segmentRef.current.scrollIntoView({ - behavior: 'smooth', + behavior: prefersReducedMotion ? 'auto' : 'smooth', block: 'nearest', }); }