From 93ff3f43b7c520ba5b9d7bee83ebe3419d01536d Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Wed, 22 Apr 2026 13:54:05 +0100
Subject: [PATCH] fix badge

---
 .../components/confluence-import-history.tsx  | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/ee/confluence-import/components/confluence-import-history.tsx b/apps/client/src/ee/confluence-import/components/confluence-import-history.tsx
index 6c8acdc1d..3010272c5 100644
--- a/apps/client/src/ee/confluence-import/components/confluence-import-history.tsx
+++ b/apps/client/src/ee/confluence-import/components/confluence-import-history.tsx
@@ -21,24 +21,44 @@ import { formattedDate } from "@/lib/time";
 import NoTableResults from "@/components/common/no-table-results";
 import { useConfluenceImportsQuery } from "@/ee/confluence-import/queries/confluence-import-queries";
 
+const BADGE_STYLES = {
+  root: { flexShrink: 0 },
+  label: { overflow: "visible" as const },
+};
+
 function statusBadge(status: ConfluenceImportStatus, cancelled: boolean) {
   if (cancelled) {
     return (
-      <Badge color="gray" variant="light" leftSection={<IconX size={12} />}>
+      <Badge
+        color="gray"
+        variant="light"
+        leftSection={<IconX size={12} />}
+        styles={BADGE_STYLES}
+      >
         Cancelled
       </Badge>
     );
   }
   if (status === "processing") {
     return (
-      <Badge color="blue" variant="light" leftSection={<Loader size={10} />}>
+      <Badge
+        color="blue"
+        variant="light"
+        leftSection={<Loader size={10} />}
+        styles={BADGE_STYLES}
+      >
         Running
       </Badge>
     );
   }
   if (status === "success") {
     return (
-      <Badge color="teal" variant="light" leftSection={<IconCheck size={12} />}>
+      <Badge
+        color="teal"
+        variant="light"
+        leftSection={<IconCheck size={12} />}
+        styles={BADGE_STYLES}
+      >
         Completed
       </Badge>
     );
@@ -48,6 +68,7 @@ function statusBadge(status: ConfluenceImportStatus, cancelled: boolean) {
       color="red"
       variant="light"
       leftSection={<IconAlertCircle size={12} />}
+      styles={BADGE_STYLES}
     >
       Failed
     </Badge>