Nav button labels direction issue xs screen

[AlecBytes]

Next.js-Creative-Portfolio-Website/src/components/navigation/NavButton.jsx

Line 109 in f7e9ee1

"absolute hidden peer-hover:block px-2 py-1 left-full mx-2 top-1/2 -translate-y-1/2 bg-background text-foreground text-sm rounded-md shadow-lg whitespace-nowrap",

The left-full in the className string is overriding the conditional labelDirection. To fix just remove left-full from line 109.

[krishna1505]

🛠️ Tooltip Direction Fix (XS Screen)
The tooltip on nav buttons using labelDirection === "left" with right-full was overflowing off-screen on extra small (XS) devices. Also, using mx-2 caused misalignment issues.

✅ Fix:

Replaced mx-2 with directional margins (ml-2 / mr-2) based on tooltip side.

Added max-xs:left-full for better responsive behavior.

Included z-50 to keep tooltip above other UI layers.

Verified Tailwind theme tokens for bg-background and text-foreground.

<span
className={clsx(
"absolute hidden peer-hover:block px-2 py-1 top-1/2 -translate-y-1/2 bg-background text-foreground text-sm rounded-md shadow-lg whitespace-nowrap z-50",
labelDirection === "left"
? "right-full left-auto mr-2 max-xs:right-auto max-xs:left-full max-xs:ml-2"
: "left-full ml-2"
)}

{label}