.

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

@@ -1,7 +1,7 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import { NavLink } from "react-router";
 import type { Server } from "~/lib/api/types";
-import { getFirstLetters } from "~/lib/utils";
+import { cn, getFirstLetters } from "~/lib/utils";
 import { Button } from "../ui/button";
 
 export interface ServerButtonProps {
@@ -12,13 +12,11 @@ export function ServerButton({ server }: ServerButtonProps) {
     return (
         <NavLink to={`/app/server/${server.id}`}>
             {({ isActive }) => (
-                <Button variant="outline" size="none" asChild className={isActive ? "bg-accent" : ""}>
-                    <div>
-                        <Avatar className="size-12 rounded-none flex items-center justify-center">
+                <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>
-                                <div>{getFirstLetters(server.name, 4)}</div>
-                            </AvatarFallback>
+                            <AvatarFallback>{getFirstLetters(server.name, 4)}</AvatarFallback>
                         </Avatar>
                     </div>
                 </Button>