From 6fe4c32a2f4fdfa739e716a0ec47770cb88b1a0f Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Wed, 24 Jun 2026 01:24:45 +0800
Subject: [PATCH] fix: use tick() for panel scroll reset on video switch

---
 frontend/src/routes/YoutubeDashboard.svelte | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/routes/YoutubeDashboard.svelte b/frontend/src/routes/YoutubeDashboard.svelte
index 7bd5a9b..3a153ec 100644
--- a/frontend/src/routes/YoutubeDashboard.svelte
+++ b/frontend/src/routes/YoutubeDashboard.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
 
   let videos = $state([]);
   let selectedVideo = $state(null);
@@ -58,6 +58,13 @@
   }
 
   $effect(() => { if (activeTab) loadVideos(); });
+  $effect(() => {
+    if (selectedVideo) {
+      tick().then(() => {
+        document.getElementById('summary-panel')?.scrollTo({ top: 0, behavior: 'instant' });
+      });
+    }
+  });
   onMount(() => {
     document.documentElement.className = theme;
     loadVideos();
@@ -91,9 +98,6 @@
     requestAnimationFrame(() => {
       const el = document.querySelector(`[data-video-index="${index}"]`);
       if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      // Also scroll summary panel to top
-      const main = document.querySelector('main');
-      if (main) main.scrollTop = 0;
     });
   }
 
@@ -146,7 +150,7 @@
       <div class="flex-1 overflow-y-auto divide-y" style="border-color:var(--border)">
         {#each videos as video (video.video_id)}
           {@const i = videos.indexOf(video)}
-          <button onclick={() => { selectedVideo = video; document.querySelector('main')?.scrollTo(0,0); }}
+          <button onclick={() => { selectedVideo = video; }}
             data-video-index={i}
             class="w-full text-left p-3 transition flex items-start space-x-3"
             style="border-left:2px solid {selectedVideo?.video_id === video.video_id ? 'var(--accent)' : 'transparent'};
@@ -163,7 +167,7 @@
     </aside>
 
     <!-- Right: summary PRIMARY -->
-    <main class="flex-1 overflow-y-auto" style="background:var(--bg-primary)">
+    <main id="summary-panel" class="flex-1 overflow-y-auto" style="background:var(--bg-primary)">
       {#if selectedVideo}
         <div class="p-6 max-w-3xl mx-auto space-y-4">
           <!-- ★ AI Digest -->