From 883e4642dc33d77f4ae771e825ae7dd0aca68499 Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Wed, 12 Nov 2025 22:17:37 +0500
Subject: [PATCH] 123

---
 .../src/components/common/ComponentCard.tsx   |  6 +++---
 .../components/dashboard/WorkflowPipeline.tsx | 20 +++++++++----------
 .../components/ui/tooltip/EnhancedTooltip.tsx |  4 +++-
 .../src/components/ui/tooltip/Tooltip.tsx     |  4 ++--
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/common/ComponentCard.tsx b/frontend/src/components/common/ComponentCard.tsx
index 9727d769..16831c07 100644
--- a/frontend/src/components/common/ComponentCard.tsx
+++ b/frontend/src/components/common/ComponentCard.tsx
@@ -13,10 +13,10 @@ const ComponentCard: React.FC<ComponentCardProps> = ({
 }) => {
   return (
     <div
-      className={`rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] ${className}`}
+      className={`rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] overflow-visible ${className}`}
     >
       {/* Card Header */}
-      <div className="px-6 py-5">
+      <div className="px-6 py-5 relative z-0">
         <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
           {title}
         </h3>
@@ -28,7 +28,7 @@ const ComponentCard: React.FC<ComponentCardProps> = ({
       </div>
 
       {/* Card Body */}
-      <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
+      <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6 overflow-visible">
         <div className="space-y-6">{children}</div>
       </div>
     </div>
diff --git a/frontend/src/components/dashboard/WorkflowPipeline.tsx b/frontend/src/components/dashboard/WorkflowPipeline.tsx
index 49fa9261..59c161b9 100644
--- a/frontend/src/components/dashboard/WorkflowPipeline.tsx
+++ b/frontend/src/components/dashboard/WorkflowPipeline.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { Link } from "react-router";
 import { CheckCircleIcon, TimeIcon, ArrowRightIcon } from "../../icons";
 import { Tooltip } from "../ui/tooltip";
@@ -59,8 +59,8 @@ export default function WorkflowPipeline({
   };
 
   return (
-    <div className={`relative ${className}`}>
-      <div className="flex items-center justify-between gap-4 overflow-x-auto pb-4 scrollbar-hide">
+    <div className={`relative overflow-visible ${className}`}>
+      <div className="flex items-center justify-between gap-2 overflow-x-auto pb-4 scrollbar-hide">
         <style>{`
           .scrollbar-hide::-webkit-scrollbar {
             display: none;
@@ -75,9 +75,9 @@ export default function WorkflowPipeline({
           const nextStep = !isLast ? steps[index + 1] : null;
           
           return (
-            <div key={step.number} className="flex items-center flex-shrink-0">
+            <React.Fragment key={step.number}>
               {/* Step Node */}
-              <div className="flex flex-col items-center">
+              <div className="flex flex-col items-center flex-shrink-0">
                 <Tooltip
                   text={
                     step.details || 
@@ -149,13 +149,13 @@ export default function WorkflowPipeline({
 
               {/* Connection Line */}
               {!isLast && showConnections && (
-                <div className="flex items-center mx-2 flex-shrink-0">
-                  <div className={`h-0.5 w-16 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
-                  <ArrowRightIcon className={`size-4 ${step.status === "completed" ? "text-success-500" : "text-gray-400"} transition-colors duration-300`} />
-                  <div className={`h-0.5 w-16 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
+                <div className="flex items-center flex-1 min-w-[60px] max-w-[120px] mx-1">
+                  <div className={`h-0.5 flex-1 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
+                  <ArrowRightIcon className={`size-4 mx-1 flex-shrink-0 ${step.status === "completed" ? "text-success-500" : "text-gray-400"} transition-colors duration-300`} />
+                  <div className={`h-0.5 flex-1 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
                 </div>
               )}
-            </div>
+            </React.Fragment>
           );
         })}
       </div>
diff --git a/frontend/src/components/ui/tooltip/EnhancedTooltip.tsx b/frontend/src/components/ui/tooltip/EnhancedTooltip.tsx
index b29b3260..a6029ef3 100644
--- a/frontend/src/components/ui/tooltip/EnhancedTooltip.tsx
+++ b/frontend/src/components/ui/tooltip/EnhancedTooltip.tsx
@@ -58,6 +58,7 @@ export const EnhancedTooltip: React.FC<EnhancedTooltipProps> = ({
     <div
       ref={triggerRef}
       className={`relative inline-flex ${className}`}
+      style={{ zIndex: 1 }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
@@ -66,12 +67,13 @@ export const EnhancedTooltip: React.FC<EnhancedTooltipProps> = ({
         <div
           ref={tooltipRef}
           className={`
-            absolute z-[9999] px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg
+            absolute z-[99999] px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg
             opacity-100 pointer-events-none transition-opacity duration-200
             whitespace-normal max-w-xs shadow-lg
             before:absolute before:border-4 before:border-transparent before:content-['']
             ${placementClasses[placement]}
           `}
+          style={{ zIndex: 99999 }}
           onMouseEnter={() => setIsVisible(true)}
           onMouseLeave={() => setIsVisible(false)}
         >
diff --git a/frontend/src/components/ui/tooltip/Tooltip.tsx b/frontend/src/components/ui/tooltip/Tooltip.tsx
index d489aece..2e549182 100644
--- a/frontend/src/components/ui/tooltip/Tooltip.tsx
+++ b/frontend/src/components/ui/tooltip/Tooltip.tsx
@@ -23,10 +23,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
   };
 
   return (
-    <div className={`relative group inline-flex ${className}`}>
+    <div className={`relative group inline-flex ${className}`} style={{ zIndex: 1 }}>
       {children}
       <span
-        className={`absolute z-[9999] px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap before:absolute before:border-4 before:border-transparent before:content-[''] ${placementClasses[placement]}`}
+        className={`absolute z-[99999] px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap before:absolute before:border-4 before:border-transparent before:content-[''] ${placementClasses[placement]}`}
       >
         {text}
       </span>