Replace expand-on-hover icon buttons with fixed-width buttons + tooltips

src/components/IconButton.tsx

@@ -1,5 +1,5 @@
-import { motion } from "framer-motion";
-import { useRef, useState, useEffect, type ReactNode } from "react";
+import { type ReactNode } from "react";
+import Tooltip from "./Tooltip";
 
 interface IconButtonProps {
 	icon: ReactNode;
@@ -11,70 +11,34 @@ interface IconButtonProps {
 	forceExpanded?: boolean;
 }
 
-const ICON_SIZE = 36;
-const GAP = 6;
-const PAD_RIGHT = 10;
-
 export default function IconButton({
 	icon,
 	label,
 	onClick,
 	disabled = false,
 	variant = "default",
 	className = "",
-	forceExpanded = false,
 }: IconButtonProps) {
-	const [hovered, setHovered] = useState(false);
-	const labelRef = useRef<HTMLSpanElement>(null);
-	const [labelWidth, setLabelWidth] = useState(0);
-
-	useEffect(() => {
-		if (labelRef.current) {
-			setLabelWidth(labelRef.current.scrollWidth);
-		}
-	}, [label]);
-
-	const expanded = (hovered || forceExpanded) && !disabled;
-	const targetWidth = expanded
-		? ICON_SIZE + GAP + labelWidth + PAD_RIGHT
-		: ICON_SIZE;
-
 	const baseClasses =
-		"inline-flex items-center h-9 rounded-full cursor-pointer overflow-hidden whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed";
+		"inline-flex items-center justify-center w-9 h-9 rounded-full cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
 
 	const variantClasses =
 		variant === "primary"
 			? "bg-lime-600 text-white hover:bg-lime-700"
 			: "text-gray-700 hover:bg-gray-100";
-	const expandedClasses = variant === "default" && expanded ? "bg-gray-100" : "";
-
-	const spring = { type: "spring" as const, stiffness: 500, damping: 30 };
 
 	return (
-		<motion.button
-			className={`${baseClasses} ${variantClasses} ${expandedClasses} ${className}`}
-			onClick={onClick}
-			disabled={disabled}
-			onMouseEnter={() => setHovered(true)}
-			onMouseLeave={() => setHovered(false)}
-			onFocus={() => setHovered(true)}
-			onBlur={() => setHovered(false)}
-			title={label}
-			animate={{ width: targetWidth }}
-			transition={spring}
-			style={{ minWidth: ICON_SIZE }}
-		>
-			<span className="flex-shrink-0 flex items-center justify-center w-9 h-9">
-				{icon}
-			</span>
-			<motion.span
-				ref={labelRef}
-				className="text-sm font-medium"
-				animate={{ opacity: expanded ? 1 : 0 }}
-				transition={{ duration: expanded ? 0.15 : 0.1 }}
+		<Tooltip label={label}>
+			<button
+				className={`${baseClasses} ${variantClasses} ${className}`}
+				onClick={onClick}
+				disabled={disabled}
+				aria-label={label}
 			>
-				{label}
-			</motion.span>
-		</motion.button>
+				<span className="flex items-center justify-center w-9 h-9">
+					{icon}
+				</span>
+			</button>
+		</Tooltip>
 	);
 }

src/components/Navbar/SplitDownloadButton.tsx

@@ -1,80 +1,40 @@
-import { useEffect, useRef, useState } from "react";
-import { ChevronDown, Download } from "lucide-react";
-import { motion } from "framer-motion";
+import { Download, ChevronDown } from "lucide-react";
+import Tooltip from "../Tooltip";
 
 interface SplitDownloadButtonProps {
 	onDownloadMarkdown: () => void;
 	onOpenMenu: () => void;
 	menuOpen: boolean;
 }
 
-const ICON_SIZE = 36;
-const CARET_SIZE = 30;
-const GAP = 6;
-const PAD_RIGHT = 4;
-
 export default function SplitDownloadButton({
 	onDownloadMarkdown,
 	onOpenMenu,
 	menuOpen,
 }: SplitDownloadButtonProps) {
-	const [hovered, setHovered] = useState(false);
-	const labelRef = useRef<HTMLSpanElement>(null);
-	const [labelWidth, setLabelWidth] = useState(0);
-
-	useEffect(() => {
-		if (labelRef.current) {
-			setLabelWidth(labelRef.current.scrollWidth);
-		}
-	}, []);
-
-	const expanded = hovered || menuOpen;
-	const targetWidth = expanded
-		? ICON_SIZE + GAP + labelWidth + PAD_RIGHT + CARET_SIZE
-		: ICON_SIZE;
-	const spring = { type: "spring" as const, stiffness: 500, damping: 30 };
-
 	return (
-		<motion.div
-			className={`inline-flex items-center justify-between h-9 rounded-full overflow-hidden text-gray-700 hover:bg-gray-100 ${expanded ? "bg-gray-100" : ""}`}
-			onMouseEnter={() => setHovered(true)}
-			onMouseLeave={() => setHovered(false)}
-			animate={{ width: targetWidth }}
-			transition={spring}
-			style={{ minWidth: ICON_SIZE }}
-		>
-			<button
-				onClick={onDownloadMarkdown}
-				className="inline-flex items-center justify-between h-9 cursor-pointer"
-				title="Download"
+		<Tooltip label="Download">
+			<div
+				className={`inline-flex items-center h-9 rounded-full overflow-hidden text-gray-700 transition-colors hover:bg-gray-100 ${menuOpen ? "bg-gray-100" : ""}`}
 			>
-				<span className="flex-shrink-0 flex items-center justify-center w-9 h-9">
+				<button
+					onClick={onDownloadMarkdown}
+					className="inline-flex items-center justify-center w-9 h-9 cursor-pointer"
+					aria-label="Download Markdown"
+				>
 					<Download size={18} />
-				</span>
-				<motion.span
-					ref={labelRef}
-					className="text-sm font-medium whitespace-nowrap mr-2"
-					animate={{ opacity: expanded ? 1 : 0 }}
-					transition={{ duration: expanded ? 0.15 : 0.1 }}
+				</button>
+				<button
+					onClick={(e) => {
+						e.stopPropagation();
+						onOpenMenu();
+					}}
+					className={`flex items-center justify-center h-9 w-7 border-l border-gray-200 cursor-pointer hover:bg-gray-200 ${menuOpen ? "bg-gray-200" : ""}`}
+					aria-label="More download options"
 				>
-					Download
-				</motion.span>
-			</button>
-			<motion.button
-				onClick={(e) => {
-					e.stopPropagation();
-					onOpenMenu();
-				}}
-				className={`flex-shrink-0 flex items-center justify-center h-9 w-7 border-l border-gray-200 cursor-pointer hover:bg-gray-200 ${menuOpen ? "bg-gray-200" : ""}`}
-				animate={{
-					opacity: expanded ? 1 : 0,
-					width: expanded ? CARET_SIZE : 0,
-				}}
-				transition={spring}
-				aria-label="More download options"
-			>
-				<ChevronDown size={14} />
-			</motion.button>
-		</motion.div>
+					<ChevronDown size={14} />
+				</button>
+			</div>
+		</Tooltip>
 	);
 }

src/components/Navbar/index.tsx

@@ -118,7 +118,7 @@ export default function Navbar({
 									}
 									label="File"
 									onClick={() => setIsFileMenuOpen((prev) => !prev)}
-									forceExpanded={isFileMenuOpen}
+
 								/>
 							}
 							onNew={onNew}

src/components/Tooltip.tsx

@@ -0,0 +1,74 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { useState, useRef, useEffect, type ReactNode } from "react";
+
+interface TooltipProps {
+	label: string;
+	children: ReactNode;
+	delay?: number;
+}
+
+export default function Tooltip({ label, children, delay = 400 }: TooltipProps) {
+	const [visible, setVisible] = useState(false);
+	const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const tooltipRef = useRef<HTMLDivElement>(null);
+	const [nudge, setNudge] = useState(0);
+
+	const show = () => {
+		timeoutRef.current = setTimeout(() => setVisible(true), delay);
+	};
+
+	const hide = () => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		setVisible(false);
+	};
+
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (visible && tooltipRef.current) {
+			const rect = tooltipRef.current.getBoundingClientRect();
+			const overflow = rect.right - window.innerWidth + 8;
+			if (overflow > 0) {
+				setNudge(-overflow);
+			} else if (rect.left < 8) {
+				setNudge(8 - rect.left);
+			} else {
+				setNudge(0);
+			}
+		}
+	}, [visible]);
+
+	return (
+		<div
+			ref={containerRef}
+			className="relative inline-flex"
+			onMouseEnter={show}
+			onMouseLeave={hide}
+			onFocus={show}
+			onBlur={hide}
+		>
+			{children}
+			<AnimatePresence>
+				{visible && (
+					<motion.div
+						ref={tooltipRef}
+						role="tooltip"
+						initial={{ opacity: 0, y: -2 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: -2 }}
+						transition={{ duration: 0.15 }}
+						className="absolute top-full left-1/2 mt-2 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg whitespace-nowrap pointer-events-none z-50"
+						style={{ transform: `translateX(calc(-50% + ${nudge}px))` }}
+					>
+						{label}
+					</motion.div>
+				)}
+			</AnimatePresence>
+		</div>
+	);
+}