fix: download progress missing when left panel scrollable

web-app/src/containers/LeftPanel.tsx

@@ -42,6 +42,7 @@
 import { DownloadManagement } from '@/containers/DownloadManegement'
 import { useSmallScreen } from '@/hooks/useMediaQuery'
 import { useClickOutside } from '@/hooks/useClickOutside'
+import { useDownloadStore } from '@/hooks/useDownloadStore'
 
 const mainMenus = [
   {
@@ -85,10 +86,10 @@
   // Use click outside hook for panel with debugging
   useClickOutside(
     () => {
       if (isSmallScreen && open) {
         setLeftPanel(false)
       }
     },
     null,
     [
       panelRef.current,
@@ -100,28 +101,28 @@
   // Auto-collapse panel only when window is resized
   useEffect(() => {
     const handleResize = () => {
       const currentIsSmallScreen = window.innerWidth <= 768
 
       // Skip on initial mount
       if (isInitialMountRef.current) {
         isInitialMountRef.current = false
         prevScreenSizeRef.current = currentIsSmallScreen
         return
       }
 
       // Only trigger if the screen size actually changed
       if (
         prevScreenSizeRef.current !== null &&
         prevScreenSizeRef.current !== currentIsSmallScreen
       ) {
         if (currentIsSmallScreen) {
           setLeftPanel(false)
         } else {
           setLeftPanel(true)
         }
         prevScreenSizeRef.current = currentIsSmallScreen
       }
     }
 
     // Add resize listener
     window.addEventListener('resize', handleResize)
@@ -161,7 +162,7 @@
   // Disable body scroll when panel is open on small screens
   useEffect(() => {
     if (isSmallScreen && open) {
       document.body.style.overflow = 'hidden'
     } else {
       document.body.style.overflow = ''
     }
@@ -171,23 +172,25 @@
     }
   }, [isSmallScreen, open])
 
+  const { downloads, localDownloadingModels } = useDownloadStore()
+
   return (
     <>
       {/* Backdrop overlay for small screens */}
       {isSmallScreen && open && (
         <div
           className="fixed inset-0 bg-black/50 backdrop-blur z-30"
           onClick={(e) => {
             // Don't close if clicking on search container or if currently searching
             if (
               searchContainerRef.current?.contains(e.target as Node) ||
               searchContainerMacRef.current?.contains(e.target as Node)
             ) {
               return
             }
             setLeftPanel(false)
           }}
         />
       )}
       <aside
         ref={panelRef}
@@ -197,7 +200,7 @@
           isResizableContext && 'h-full w-full',
           // Small screen context: fixed positioning and styling
           isSmallScreen &&
             'fixed h-[calc(100%-16px)] bg-main-view z-40 rounded-sm border border-left-panel-fg/10 m-2 px-1 w-48',
           // Default context: original styling
           !isResizableContext &&
             !isSmallScreen &&
@@ -237,23 +240,30 @@
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
               {searchTerm && (
                 <button
                   className="absolute right-2 top-1/2 -translate-y-1/2 text-left-panel-fg/70 hover:text-left-panel-fg"
                   onClick={(e) => {
                     e.preventDefault()
                     e.stopPropagation() // prevent bubbling
                     setSearchTerm('')
                   }}
                 >
                   <IconX size={14} />
                 </button>
               )}
             </div>
           )}
         </div>
 
         <div className="flex flex-col justify-between overflow-hidden mt-0 !h-[calc(100%-42px)]">
-          <div className="flex flex-col !h-[calc(100%-140px)]">
+          <div
+            className={cn(
+              'flex flex-col',
+              Object.keys(downloads).length > 0 || localDownloadingModels.size > 0
+                ? 'h-[calc(100%-200px)]'
+                : 'h-[calc(100%-140px)]'
+            )}
+          >
             {IS_MACOS && (
               <div
                 ref={searchContainerMacRef}
@@ -486,8 +496,8 @@
                 </Link>
               )
             })}
+            <DownloadManagement />
           </div>
-          <DownloadManagement />
         </div>
       </aside>
     </>