From 22a2e64563bdd5ca2e57765092f4e4dd7dcf10cd Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Thu, 12 Dec 2024 22:59:03 -0500
Subject: [PATCH] feat(logs): tooltip improvements (break out, no delay)

---
 .../dashboard/docker/logs/terminal-line.tsx   | 34 +++++++++++--------
 apps/dokploy/components/ui/tooltip.tsx        | 10 +++++-
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index 5077988d..7024d253 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -2,6 +2,7 @@ import { Badge } from "@/components/ui/badge";
 import {
 	Tooltip,
 	TooltipContent,
+	TooltipPortal,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
@@ -46,22 +47,28 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 		);
 	};
 
-	const tooltip = (color: string, timestamp: string | null) => {
-		return (
-			<TooltipProvider>
+	const tooltip = (color: string, timestamp: string) => {
+		const square = (
+			<div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
+		);
+		return timestamp ? (
+			<TooltipProvider delayDuration={0} disableHoverableContent>
 				<Tooltip>
-					<TooltipTrigger asChild>
-						<div
-							className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)}
-						/>
-					</TooltipTrigger>
-					<TooltipContent>
-						<p className="text text-xs text-muted-foreground break-all max-w-md">
-							{timestamp || "--- No time found ---"}
-						</p>
-					</TooltipContent>
+					<TooltipTrigger asChild>{square}</TooltipTrigger>
+					<TooltipPortal>
+						<TooltipContent
+							sideOffset={5}
+							className="bg-popover border-border z-[99999]"
+						>
+							<p className="text text-xs text-muted-foreground break-all max-w-md">
+								<pre>{timestamp}</pre>
+							</p>
+						</TooltipContent>
+					</TooltipPortal>
 				</Tooltip>
 			</TooltipProvider>
+		) : (
+			square
 		);
 	};
 
@@ -89,7 +96,6 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 					</span>
 				)}
 
-        
 				<Badge
 					variant={variant}
 					className="w-14 justify-center text-[10px] px-1 py-0"
diff --git a/apps/dokploy/components/ui/tooltip.tsx b/apps/dokploy/components/ui/tooltip.tsx
index c533f855..f715fd31 100644
--- a/apps/dokploy/components/ui/tooltip.tsx
+++ b/apps/dokploy/components/ui/tooltip.tsx
@@ -9,6 +9,8 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+const TooltipPortal = TooltipPrimitive.Portal;
+
 const TooltipContent = React.forwardRef<
 	React.ElementRef<typeof TooltipPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -25,4 +27,10 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export {
+	Tooltip,
+	TooltipTrigger,
+	TooltipContent,
+	TooltipProvider,
+	TooltipPortal,
+};