From 548b2b83a433d3eda1e5b94794dec4700dca39df Mon Sep 17 00:00:00 2001
From: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com>
Date: Fri, 29 Aug 2025 16:38:19 +0000
Subject: 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
---
 apps/web/components/menu.tsx | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/menu.tsx b/apps/web/components/menu.tsx
index 926b2a7a..f59617c0 100644
--- a/apps/web/components/menu.tsx
+++ b/apps/web/components/menu.tsx
@@ -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
-- 
cgit v1.2.3