minor visual adjustments to tags

src/components/label-badge.tsx

@@ -1,40 +1,62 @@
 import { cn } from "@app/lib/cn";
 import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+const labelBadgeClassName =
+    "inline-flex h-auto items-center gap-1 rounded-full border border-input bg-background py-0 pl-1.5 pr-2 text-sm shadow-xs";
 
 export type LabelBadgeProps = {
     name: string;
     color: string;
     onClick?: () => void;
     className?: string;
+    displayOnly?: boolean;
 };
 
 export function LabelBadge({
     onClick,
     name,
     color,
-    className
+    className,
+    displayOnly = false
 }: LabelBadgeProps) {
-    return (
-        <Button
-            variant="outline"
-            onClick={onClick}
-            className={cn(
-                "inline-flex gap-1 items-center",
-                "rounded-full text-sm cursor-pointer",
-                "pl-1.5 pr-2 py-0 h-auto",
-                className
-            )}
-        >
+    const content = (
+        <>
             <div
-                className="size-3 rounded-full bg-(--color) flex-none"
+                className="size-2 flex-none rounded-full bg-(--color)"
                 style={{
                     // @ts-expect-error css color
                     "--color": color
                 }}
             />
-            <span className="whitespace-nowrap text-ellipsis max-w-16 overflow-hidden relative">
+            <span className="relative max-w-24 overflow-hidden text-ellipsis whitespace-nowrap">
                 {name}
             </span>
-        </Button>
+        </>
+    );
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                {displayOnly ? (
+                    <span className={cn(labelBadgeClassName, className)}>
+                        {content}
+                    </span>
+                ) : (
+                    <Button
+                        variant="outline"
+                        onClick={onClick}
+                        className={cn(
+                            labelBadgeClassName,
+                            "cursor-pointer",
+                            className
+                        )}
+                    >
+                        {content}
+                    </Button>
+                )}
+            </TooltipTrigger>
+            <TooltipContent>{name}</TooltipContent>
+        </Tooltip>
     );
 }