diff options
| author | alexf37 <[email protected]> | 2025-08-26 21:51:39 +0000 |
|---|---|---|
| committer | alexf37 <[email protected]> | 2025-08-26 21:51:39 +0000 |
| commit | a3955b55cb019c87498f98ee29c18fdd7ac51e9d (patch) | |
| tree | 6be9eaa2b6fec7c77c699a4704956a83cbf40f8d | |
| parent | fix: missing dialog title in consumer mobile drawer (#386) (diff) | |
| download | supermemory-alex/fix-memory-limits-cutoff.tar.xz supermemory-alex/fix-memory-limits-cutoff.zip | |
fix: memory limits cutoff (#385)alex/fix-memory-limits-cutoff
Previously, the badge with the memories limit in the consumer app menu was cut off on desktop, and now with this PR, it no longer is.
| -rw-r--r-- | apps/web/components/menu.tsx | 29 |
1 files changed, 18 insertions, 11 deletions
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" && ( - <span className="text-xs bg-yellow-500/20 text-yellow-400 px-1.5 py-0.5 rounded"> - {memoriesLimit - memoriesUsed} left - </span> - )} </motion.p> + {shouldShowLimitWarning && item.key === "addUrl" && ( + <motion.span + animate={{ opacity: isHovered ? 1 : 0, x: isHovered ? 0 : -10 }} + initial={{ opacity: 0, x: -10 }} + transition={{ + duration: isHovered ? 0.2 : 0.1, + delay: isHovered ? index * 0.03 : 0, + ease: [0.4, 0, 0.2, 1], + }} + className="absolute right-2 top-1/2 -translate-y-1/2 text-xs bg-yellow-500/20 text-yellow-400 px-1.5 py-0.5 rounded" + > + {memoriesLimit - memoriesUsed} left + </motion.span> + )} </motion.button> {index === 0 && ( <motion.div |