From d0e603ee8436c4d304615afa305218586a2226d7 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Mon, 14 Oct 2024 11:58:54 +0300
Subject: [PATCH] fix: add spacing around "/" and graysacale in check names

Fixes #2189
---
 src/components/Canary/renderers.tsx | 33 ++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/Canary/renderers.tsx b/src/components/Canary/renderers.tsx
index fda97f7e3..787fcdc5d 100644
--- a/src/components/Canary/renderers.tsx
+++ b/src/components/Canary/renderers.tsx
@@ -131,10 +131,41 @@ 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 pr-1" />}
+        {parts.map((part, idx) => {
+          // if not last part
+          if (idx !== parts.length - 1) {
+            return (
+              <>
+                <span key={part} className="text-sm text-gray-500">
+                  {part}
+                </span>
+                <span className="text-light px-0.5 text-gray-500">/</span>
+              </>
+            );
+          }
+          // last part
+          return (
+            <span key={part} className="text-sm">
+              {part}
+            </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 />}
     </>
   );
 }