From f74a42852197fcb0f0655272bc6d62d456441eff Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Wed, 24 Jun 2026 01:29:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20proper=20scroll=20containment=20?=
 =?UTF-8?q?=E2=80=94=20no=20body=20scroll,=20panel=20overflow-y=20with=20b?=
 =?UTF-8?q?ind:this=20ref?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/frontend/src/routes/YoutubeDashboard.svelte b/frontend/src/routes/YoutubeDashboard.svelte
index 3a153ec..a547748 100644
--- a/frontend/src/routes/YoutubeDashboard.svelte
+++ b/frontend/src/routes/YoutubeDashboard.svelte
@@ -8,6 +8,7 @@
   let isSyncing = $state(false);
   let syncMessage = $state('');
   let theme = $state(localStorage.getItem('theme') || 'dark');
+  let summaryPanel = $state(null);
 
   function toggleTheme() {
     theme = theme === 'dark' ? 'light' : 'dark';
@@ -59,10 +60,8 @@
 
   $effect(() => { if (activeTab) loadVideos(); });
   $effect(() => {
-    if (selectedVideo) {
-      tick().then(() => {
-        document.getElementById('summary-panel')?.scrollTo({ top: 0, behavior: 'instant' });
-      });
+    if (selectedVideo && summaryPanel) {
+      tick().then(() => summaryPanel.scrollTop = 0);
     }
   });
   onMount(() => {
@@ -114,7 +113,7 @@
   }
 </script>
 
-<div style="background:var(--bg-primary);color:var(--text-primary);min-height:100vh">
+<div style="background:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden;display:flex;flex-direction:column">
   <!-- Top bar -->
   <header style="background:var(--bg-secondary);border-bottom:1px solid var(--border);" class="flex items-center justify-between px-5 py-2.5">
     <div class="flex items-center space-x-3">
@@ -135,7 +134,7 @@
     </div>
   </header>
 
-  <div class="flex" style="min-height:calc(100vh - 44px)">
+  <div class="flex flex-1 overflow-hidden">
     <!-- Left: video list -->
     <aside style="width:280px;background:var(--bg-secondary);border-right:1px solid var(--border)" class="flex flex-col flex-shrink-0">
       <div class="flex p-1.5" style="border-bottom:1px solid var(--border)">
@@ -167,7 +166,7 @@
     </aside>
 
     <!-- Right: summary PRIMARY -->
-    <main id="summary-panel" class="flex-1 overflow-y-auto" style="background:var(--bg-primary)">
+    <main bind:this={summaryPanel} id="summary-panel" class="flex-1 overflow-y-auto" style="background:var(--bg-primary);min-height:0">
       {#if selectedVideo}
         <div class="p-6 max-w-3xl mx-auto space-y-4">
           <!-- ★ AI Digest -->