.

app/components/custom-ui/server-button.tsx

@@ -3,6 +3,7 @@ import { NavLink } from "react-router";
 import type { Server } from "~/lib/api/types";
 import { cn, getFirstLetters } from "~/lib/utils";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 export interface ServerButtonProps {
     server: Server;
@@ -12,14 +13,25 @@ export function ServerButton({ server }: ServerButtonProps) {
     return (
         <NavLink to={`/app/server/${server.id}`}>
             {({ isActive }) => (
-                <Button variant="outline" size="none" className={cn("overflow-hidden", isActive ? "bg-accent" : "")}>
-                    <div className="flex items-center justify-center size-12">
-                        <Avatar className="rounded-none">
-                            <AvatarImage src={server.iconUrl} className="rounded-none" />
-                            <AvatarFallback>{getFirstLetters(server.name, 4)}</AvatarFallback>
-                        </Avatar>
-                    </div>
-                </Button>
+                <Tooltip disableHoverableContent>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant="outline"
+                            size="none"
+                            className={cn("overflow-hidden", isActive ? "bg-accent" : "")}
+                        >
+                            <div className="flex items-center justify-center size-12">
+                                <Avatar className="rounded-none">
+                                    <AvatarImage src={server.iconUrl} className="rounded-none" />
+                                    <AvatarFallback>{getFirstLetters(server.name, 4)}</AvatarFallback>
+                                </Avatar>
+                            </div>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                        <p className="text-xs">{server.name}</p>
+                    </TooltipContent>
+                </Tooltip>
             )}
         </NavLink>
     );