diff --git a/apps/web/components/menu.tsx b/apps/web/components/menu.tsx index 8a2216cc..9b9abd81 100644 --- a/apps/web/components/menu.tsx +++ b/apps/web/components/menu.tsx @@ -151,7 +151,7 @@ function Menu({ id }: { id?: string }) { }, [isMobile, isMobileMenuOpen, isHovered, expandedView, setMenuExpanded]); // Calculate width based on state - const menuWidth = expandedView || isCollapsing ? 600 : isHovered ? 160 : 56; + const menuWidth = expandedView || isCollapsing ? 600 : isHovered ? 220 : 56; // Dynamic z-index for mobile based on active panel const mobileZIndex = @@ -275,26 +275,33 @@ function Menu({ id }: { id?: string }) { opacity: isHovered ? 1 : 0, x: isHovered ? 0 : -10, }} - className="drop-shadow-lg absolute left-10 whitespace-nowrap flex items-center gap-2" + className="drop-shadow-lg absolute left-10 right-16 whitespace-nowrap" initial={{ opacity: 0, x: -10 }} style={{ transform: "translateZ(0)", }} transition={{ - duration: 0.3, - delay: index * 0.03, + duration: isHovered ? 0.2 : 0.1, + delay: isHovered ? index * 0.03 : 0, ease: [0.4, 0, 0.2, 1], }} > {item.text} - {/* Show warning indicator for Add Memory when limits approached */} - {shouldShowLimitWarning && - item.key === "addUrl" && ( - - {memoriesLimit - memoriesUsed} left - - )} + {shouldShowLimitWarning && item.key === "addUrl" && ( + + {memoriesLimit - memoriesUsed} left + + )} {index === 0 && (