minor visual adjustments to tags

src/components/ClientResourcesTable.tsx

@@ -63,6 +63,7 @@ import { build } from "@server/build";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { LabelBadge } from "./label-badge";
+import { LabelOverflowBadge } from "./label-overflow-badge";
 import { LabelsSelector, type SelectedLabel } from "./labels-selector";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 
@@ -740,34 +741,17 @@ function ClientResourceLabelCell({
         });
     }
 
+    const visibleLabels = optimisticLabels.slice(0, 3);
+    const overflowLabels = optimisticLabels.slice(3);
+
     return (
-        <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
-            {optimisticLabels.slice(0, 3).map((label) => (
-                <LabelBadge
-                    key={label.labelId}
-                    onClick={() => setIsPopoverOpen(true)}
-                    {...label}
-                />
-            ))}
-            {optimisticLabels.length > 3 && (
-                <Button
-                    variant="outline"
-                    className={cn(
-                        "inline-flex gap-1 items-center",
-                        "rounded-full text-sm cursor-pointer",
-                        "px-1.5 py-0 h-auto"
-                    )}
-                    onClick={() => setIsPopoverOpen(true)}
-                >
-                    +{optimisticLabels.length - 3}
-                </Button>
-            )}
+        <div className="inline-flex w-full min-w-0 flex-nowrap items-center gap-1 overflow-hidden">
             <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                 <PopoverTrigger asChild>
                     <Button
                         size="icon"
                         variant="outline"
-                        className="p-1 size-auto rounded-full"
+                        className="size-auto shrink-0 rounded-full p-1"
                         title={t("addLabels")}
                     >
                         <span className="sr-only">{t("addLabels")}</span>
@@ -782,6 +766,18 @@ function ClientResourceLabelCell({
                     />
                 </PopoverContent>
             </Popover>
+            {visibleLabels.map((label) => (
+                <LabelBadge
+                    key={label.labelId}
+                    className="shrink-0"
+                    onClick={() => setIsPopoverOpen(true)}
+                    {...label}
+                />
+            ))}
+            <LabelOverflowBadge
+                labels={overflowLabels}
+                onClick={() => setIsPopoverOpen(true)}
+            />
         </div>
     );
 }