From c44c02b8ba1e2f9f1764ba871beb720b0b439150 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Mon, 11 May 2026 17:04:44 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20make=20site=20labels=20column=20?=
 =?UTF-8?q?design=20nicer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SitesTable.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/SitesTable.tsx b/src/components/SitesTable.tsx
index 57e9ea8a9..f75184a00 100644
--- a/src/components/SitesTable.tsx
+++ b/src/components/SitesTable.tsx
@@ -469,7 +469,11 @@ export default function SitesTable({
         // The label feature should be added to the tiers
         {
             accessorKey: "labels",
-            header: () => <span className="p-3">{t("labels")}</span>,
+            header: () => (
+                <span className="p-3 text-end w-full inline-block">
+                    {t("labels")}
+                </span>
+            ),
             cell: ({ row }) => {
                 return <SiteLabelCell site={row.original} orgId={orgId} />;
             }
@@ -679,6 +683,8 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
 
     const api = createApiClient(useEnvContext());
 
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
     const router = useRouter();
 
     const labels = site.labels ?? [];
@@ -722,7 +728,7 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
 
     return (
         <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
-            {optimisticLabels.map((label) => (
+            {optimisticLabels.slice(0, 3).map((label) => (
                 <Button
                     key={label.labelId}
                     variant="outline"
@@ -740,14 +746,27 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
                             "--color": label.color
                         }}
                     />
-                    <span className="whitespace-nowrap text-ellipsis max-w-20 overflow-hidden relative bottom-0.5">
+                    <span className="whitespace-nowrap text-ellipsis max-w-16 overflow-hidden relative bottom-0.5">
                         {label.name}
                     </span>
 
                     <XIcon className="size-3 flex-none" />
                 </Button>
             ))}
-            <Popover>
+            {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>
+            )}
+            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                 <PopoverTrigger asChild>
                     <Button
                         size="icon"