From 61e705ece4681be6db4069d6f863deb673de59b9 Mon Sep 17 00:00:00 2001
From: kitos <kitos@aegis.local>
Date: Tue, 2 Jun 2026 10:45:11 +0200
Subject: [PATCH] fix(status-badge): show tooltip below badge (not above) to
 prevent clipping

---
 frontend/src/components/StatusBadge.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
index 52d51ff..215224e 100644
--- a/frontend/src/components/StatusBadge.tsx
+++ b/frontend/src/components/StatusBadge.tsx
@@ -93,16 +93,18 @@ export default function StatusBadge({ status, className = "", size = "md" }: Sta
         {BADGE_LABELS[status]}
       </span>
 
-      {/* Tooltip — appears above the badge on hover */}
+      {/* Tooltip — appears below the badge on hover */}
       <span
         className="
-          pointer-events-none absolute bottom-full left-1/2 z-50 mb-2
-          w-64 -translate-x-1/2
+          pointer-events-none absolute top-full left-0 z-50 mt-2
+          w-64
           rounded-xl border border-gray-700 bg-gray-900 p-3 shadow-xl
           opacity-0 transition-opacity duration-150
           group-hover:opacity-100
         "
       >
+        {/* Arrow pointing up */}
+        <span className="absolute bottom-full left-4 border-4 border-transparent border-b-gray-700" />
         <p className="mb-2 text-xs font-semibold text-white">{tip.heading}</p>
         {tip.lines.map(({ label, text }) => (
           <div key={label} className="mb-1 last:mb-0">
@@ -112,8 +114,6 @@ export default function StatusBadge({ status, className = "", size = "md" }: Sta
             <p className="text-[11px] leading-snug text-gray-300">{text}</p>
           </div>
         ))}
-        {/* Arrow pointing down */}
-        <span className="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-700" />
       </span>
     </span>
   );