jimmy/t-youtube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: proper scroll containment — no body scroll, panel overflow-y with bind:this ref

Browse Source
This commit is contained in:
Gan, Jimmy
2026-06-24 01:29:34 +08:00
parent 6fe4c32a2f
commit f74a428521
1 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/YoutubeDashboard.svelte
+6 -7
View File
@@ -8,6 +8,7 @@
let isSyncing = $state(false); let isSyncing = $state(false);
let syncMessage = $state(''); let syncMessage = $state('');
let theme = $state(localStorage.getItem('theme') || 'dark'); let theme = $state(localStorage.getItem('theme') || 'dark');
let summaryPanel = $state(null);
function toggleTheme() { function toggleTheme() {
theme = theme === 'dark' ? 'light' : 'dark'; theme = theme === 'dark' ? 'light' : 'dark';
@@ -59,10 +60,8 @@
$effect(() => { if (activeTab) loadVideos(); }); $effect(() => { if (activeTab) loadVideos(); });
$effect(() => { $effect(() => {
if (selectedVideo) { if (selectedVideo && summaryPanel) {
tick().then(() => { tick().then(() => summaryPanel.scrollTop = 0);
document.getElementById('summary-panel')?.scrollTo({ top: 0, behavior: 'instant' });
});
} }
}); });
onMount(() => { onMount(() => {
@@ -114,7 +113,7 @@
} }
</script> </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 --> <!-- 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"> <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"> <div class="flex items-center space-x-3">
@@ -135,7 +134,7 @@
</div> </div>
</header> </header>
<div class="flex" style="min-height:calc(100vh - 44px)"> <div class="flex flex-1 overflow-hidden">
<!-- Left: video list --> <!-- Left: video list -->
<aside style="width:280px;background:var(--bg-secondary);border-right:1px solid var(--border)" class="flex flex-col flex-shrink-0"> <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)"> <div class="flex p-1.5" style="border-bottom:1px solid var(--border)">
@@ -167,7 +166,7 @@
</aside> </aside>
<!-- Right: summary PRIMARY --> <!-- 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} {#if selectedVideo}
<div class="p-6 max-w-3xl mx-auto space-y-4"> <div class="p-6 max-w-3xl mx-auto space-y-4">
<!-- ★ AI Digest --> <!-- ★ AI Digest -->