refactor(ui): optimize menu hover width and simplify text layout (#396)

Before

![image.png](https://app.graphite.dev/user-attachments/assets/a29a075c-52fc-421d-b3ab-d19163a0cade.png)

After

![image.png](https://app.graphite.dev/user-attachments/assets/2b2584ea-cb07-44ed-bec4-c3b23e70b4d2.png)

- Reduced menu hover width from 220px to 160px
- Simplified text positioning from absolute positioning to padding-left
- Removed the usage limit warning badge from the desktop menu
This commit is contained in:
MaheshtheDev 2025-08-29 16:38:19 +00:00
parent 2a8a97ee98
commit 548b2b83a4

View file

@ -159,7 +159,7 @@ function Menu({ id }: { id?: string }) {
}, [isMobile, isMobileMenuOpen, isHovered, expandedView, setMenuExpanded]);
// Calculate width based on state
const menuWidth = expandedView || isCollapsing ? 600 : isHovered ? 220 : 56;
const menuWidth = expandedView || isCollapsing ? 600 : isHovered ? 160 : 56;
// Dynamic z-index for mobile based on active panel
const mobileZIndex =
@ -283,7 +283,7 @@ function Menu({ id }: { id?: string }) {
opacity: isHovered ? 1 : 0,
x: isHovered ? 0 : -10,
}}
className="drop-shadow-lg absolute left-10 right-16 whitespace-nowrap"
className="drop-shadow-lg pl-3 whitespace-nowrap"
initial={{ opacity: 0, x: -10 }}
style={{
transform: "translateZ(0)",
@ -296,20 +296,6 @@ function Menu({ id }: { id?: string }) {
>
{item.text}
</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