fix: prevent sidebar wheel from blocking tree library scrolling

This commit is contained in:
chihlasm
2026-02-17 21:06:56 -05:00
parent 9f2e98376e
commit fad9646ed3
2 changed files with 22 additions and 6 deletions

View File

@@ -112,8 +112,27 @@ export function Sidebar() {
}
}
const handleSidebarWheel = (e: React.WheelEvent<HTMLElement>) => {
const sidebar = e.currentTarget
const canSidebarScroll = sidebar.scrollHeight > sidebar.clientHeight
const atTop = sidebar.scrollTop <= 0
const atBottom = sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1
// If sidebar can't consume wheel movement, forward it to main content scroller.
if (!canSidebarScroll || (e.deltaY < 0 && atTop) || (e.deltaY > 0 && atBottom)) {
const main = document.querySelector('.main-content') as HTMLElement | null
if (main) {
main.scrollTop += e.deltaY
e.preventDefault()
}
}
}
return (
<nav className="sidebar flex flex-col border-r border-border bg-[hsl(var(--sidebar-bg))]">
<nav
className="sidebar flex flex-col border-r border-border bg-[hsl(var(--sidebar-bg))]"
onWheel={handleSidebarWheel}
>
{sidebarCollapsed ? (
<>
{/* Collapsed: icon-only nav */}

View File

@@ -248,10 +248,8 @@ export function TreeLibraryPage() {
selectedCategoryId || selectedTags.length > 0 || searchQuery || selectedFolderId
return (
<div className="flex h-full">
{/* Main Content */}
<div className="flex-1 overflow-auto">
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="min-h-full">
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
<div>
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
@@ -520,7 +518,6 @@ export function TreeLibraryPage() {
)}
</>
)}
</div>
</div>
{/* Folder Edit Modal */}