fix: add spacing around "/" and graysacale in check names

Fixes #2189
flanksource · Oct 14, 2024 · 03c747d · 03c747d
1 parent 862b962
commit 03c747d
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/components/Canary/renderers.tsx b/src/components/Canary/renderers.tsx
@@ -131,10 +131,25 @@ export function CanaryCheckName({
   title,
   isDeleted
 }: CanaryCheckNameProps) {
+  const hasSlash = title.includes("/");
+
+  if (hasSlash) {
+    const parts = title.split("/");
+    return (
+      <>
+        {icon && <Icon name={icon} className="h-6 w-auto" />}
+        <span className="pl-1 text-sm text-gray-500">{parts[0]} </span>
+        <span className="text-light px-0.5 text-gray-500">/</span>
+        <span className="text-sm">{parts[1]}</span>
+        {isDeleted && <TbTrash />}
+      </>
+    );
+  }
+
   return (
     <>
       {icon && <Icon name={icon} className="h-6 w-auto" />}
-      <span className="pl-1 text-sm">{title}</span> {isDeleted && <TbTrash />}
+      <span className="pl-1 text-sm">{title} </span> {isDeleted && <TbTrash />}
     </>
   );
 }