fix: projects title long name

web-app/src/containers/LeftPanel.tsx

@@ -98,10 +98,10 @@
   // Use click outside hook for panel with debugging
   useClickOutside(
     () => {
       if (isSmallScreen && open) {
         setLeftPanel(false)
       }
     },
     null,
     [
       panelRef.current,
@@ -113,28 +113,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 && open) {
           setLeftPanel(false)
         } else if (!open) {
           setLeftPanel(true)
         }
         prevScreenSizeRef.current = currentIsSmallScreen
       }
     }
 
     // Add resize listener
     window.addEventListener('resize', handleResize)
@@ -180,9 +180,9 @@
 
   const filteredProjects = useMemo(() => {
     if (!searchTerm) return folders
     return folders.filter((folder) =>
       folder.name.toLowerCase().includes(searchTerm.toLowerCase())
     )
   }, [folders, searchTerm])
 
   // Memoize categorized threads based on filteredThreads
@@ -196,32 +196,32 @@
 
   // Project handlers
   const handleProjectDelete = (id: string) => {
     setDeletingProjectId(id)
     setDeleteProjectConfirmOpen(true)
   }
 
   const confirmProjectDelete = () => {
     if (deletingProjectId) {
       deleteFolder(deletingProjectId)
       setDeleteProjectConfirmOpen(false)
       setDeletingProjectId(null)
     }
   }
 
   const handleProjectSave = (name: string) => {
     if (editingProjectKey) {
       updateFolder(editingProjectKey, name)
     } else {
       addFolder(name)
     }
     setProjectDialogOpen(false)
     setEditingProjectKey(null)
   }
 
   // Disable body scroll when panel is open on small screens
   useEffect(() => {
     if (isSmallScreen && open) {
       document.body.style.overflow = 'hidden'
     } else {
       document.body.style.overflow = ''
     }
@@ -235,9 +235,9 @@
     <>
       {/* 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) ||
@@ -431,9 +431,9 @@
                             >
                               <IconFolder
                                 size={16}
-                                className="text-left-panel-fg/70"
+                                className="text-left-panel-fg/70 shrink-0"
                               />
-                              <span className="text-sm text-left-panel-fg/90">
+                              <span className="text-sm text-left-panel-fg/90 truncate">
                                 {folder.name}
                               </span>
                             </Link>