From 587bcfb298c255c9db8919f428fcc79d51c55637 Mon Sep 17 00:00:00 2001
From: Julian Bez <julian@posthog.com>
Date: Tue, 12 Mar 2024 15:05:05 +0000
Subject: [PATCH] fix(insights): Fix paths node names truncation when custom
 events (#20865)

---
 frontend/src/scenes/paths/PathNodeCardButton.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/scenes/paths/PathNodeCardButton.tsx b/frontend/src/scenes/paths/PathNodeCardButton.tsx
index d8976e806760b..b4c2e03313cea 100644
--- a/frontend/src/scenes/paths/PathNodeCardButton.tsx
+++ b/frontend/src/scenes/paths/PathNodeCardButton.tsx
@@ -33,8 +33,11 @@ export function PathNodeCardButton({
     const { user } = useValues(userLogic)
     const hasAdvancedPaths = user?.organization?.available_features?.includes(AvailableFeature.PATHS_ADVANCED)
 
-    const setAsPathStart = (): void => setFilter({ startPoint: pageUrl(node) })
-    const setAsPathEnd = (): void => setFilter({ endPoint: pageUrl(node) })
+    const nodeName = pageUrl(node)
+    const isPath = nodeName.includes('/')
+
+    const setAsPathStart = (): void => setFilter({ startPoint: nodeName })
+    const setAsPathEnd = (): void => setFilter({ endPoint: nodeName })
     const excludePathItem = (): void => {
         setFilter({ excludeEvents: [...(filter.excludeEvents || []), pageUrl(node, false)] })
     }
@@ -42,15 +45,15 @@ export function PathNodeCardButton({
         viewPathToFunnel(node)
     }
     const copyName = (): void => {
-        void copyToClipboard(pageUrl(node)).then(captureException)
+        void copyToClipboard(nodeName).then(captureException)
     }
     const openModal = (): void => openPersonsModal({ path_end_key: name })
 
     return (
         <div className="flex justify-between items-center w-full">
-            <div className="flex items-center font-semibold">
+            <div className="font-semibold overflow-hidden max-h-16">
                 <span className="text-xxs text-muted mr-1">{`0${name[0]}`}</span>
-                <span className="text-xs">{pageUrl(node, true)}</span>
+                <span className="text-xs break-words">{pageUrl(node, isPath)}</span>
             </div>
             <div className="flex flex-nowrap">
                 <LemonButton size="small" onClick={openModal}>