From 3d123968ccdd29a83b58fd9e2b34078164a7ffbc Mon Sep 17 00:00:00 2001
From: Celal Zamanoglu <95054566+celalzamanoglu@users.noreply.github.com>
Date: Wed, 10 Dec 2025 01:11:05 +0300
Subject: [PATCH] manual line breaking support on tooltip component (#4251)

---
 skyvern-frontend/src/components/ui/tooltip.tsx                 | 2 +-
 .../workflows/editor/nodes/ConditionalNode/ConditionalNode.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/skyvern-frontend/src/components/ui/tooltip.tsx b/skyvern-frontend/src/components/ui/tooltip.tsx
index aa51e8bf..1b9cc61a 100644
--- a/skyvern-frontend/src/components/ui/tooltip.tsx
+++ b/skyvern-frontend/src/components/ui/tooltip.tsx
@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 overflow-hidden whitespace-pre-line rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ConditionalNode/ConditionalNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ConditionalNode/ConditionalNode.tsx
index b3be4b9c..b9603ab9 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/ConditionalNode/ConditionalNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ConditionalNode/ConditionalNode.tsx
@@ -666,8 +666,7 @@ function ConditionalNodeComponent({ id, data }: NodeProps<ConditionalNode>) {
                     </Label>
                     {!activeBranch.is_default && (
                       <HelpTooltip
-                        content={`Jinja: {{ y > 100 }}
-Natural language: y is greater than 100`}
+                        content={`Jinja: {{ y > 100 }}\nNatural language: y is greater than 100`}
                       />
                     )}
                   </div>