From b6d63ffcf79b366451e1354ef7de389c4eb1c0b8 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Wed, 6 May 2026 12:08:08 +0200
Subject: [PATCH 1/8] Enforce minimum width of the percentage bar

---
 assets/js/dashboard/extra/exploration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/dashboard/extra/exploration.js b/assets/js/dashboard/extra/exploration.js
index 09aecc2467e3..a58bd0da8092 100644
--- a/assets/js/dashboard/extra/exploration.js
+++ b/assets/js/dashboard/extra/exploration.js
@@ -348,7 +348,7 @@ function CandidateCard({
   const barWidth =
     isSelected && selectedConversionRate !== null
       ? selectedConversionRate
-      : Math.round((visitors / stepMaxVisitors) * 100)
+      : Math.max(1, Math.round((visitors / stepMaxVisitors) * 100))
 
   const textColor = isDimmed
     ? 'text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400'

From acf503ea3a0eca608d6e3a8d530e0533a0fef8dd Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Wed, 6 May 2026 12:08:40 +0200
Subject: [PATCH 2/8] Render icon for goals too

---
 assets/js/dashboard/extra/exploration.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/assets/js/dashboard/extra/exploration.js b/assets/js/dashboard/extra/exploration.js
index a58bd0da8092..dc9ddfb0c9d9 100644
--- a/assets/js/dashboard/extra/exploration.js
+++ b/assets/js/dashboard/extra/exploration.js
@@ -342,6 +342,7 @@ function CandidateCard({
   onSelect
 }) {
   const isCustomEvent = step.name !== 'pageview'
+  const isGoal = step.is_goal
 
   const visitorsToShow =
     isSelected && selectedVisitors !== null ? selectedVisitors : visitors
@@ -389,9 +390,9 @@ function CandidateCard({
                 : step.label
             }
           >
-            {isCustomEvent && (
+            {(isCustomEvent || isGoal) && (
               <CursorIcon
-                title="Custom event"
+                title={isGoal ? 'Goal' : 'Custom event'}
                 className={`size-4 shrink-0 ${textColor}`}
               />
             )}

From cae40f984793f8ba2b726edd5cc2271f9ba5639a Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Wed, 6 May 2026 12:38:20 +0200
Subject: [PATCH 3/8] Enforce min percentage bar width for selected items as
 well

---
 assets/js/dashboard/extra/exploration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/dashboard/extra/exploration.js b/assets/js/dashboard/extra/exploration.js
index dc9ddfb0c9d9..3e66b17f6d6d 100644
--- a/assets/js/dashboard/extra/exploration.js
+++ b/assets/js/dashboard/extra/exploration.js
@@ -348,7 +348,7 @@ function CandidateCard({
     isSelected && selectedVisitors !== null ? selectedVisitors : visitors
   const barWidth =
     isSelected && selectedConversionRate !== null
-      ? selectedConversionRate
+      ? Math.max(1, selectedConversionRate)
       : Math.max(1, Math.round((visitors / stepMaxVisitors) * 100))
 
   const textColor = isDimmed

From 9ec897b888f1b1ce59884f021b455d237889c0f3 Mon Sep 17 00:00:00 2001
From: Adam Rutkowski <hq@mtod.org>
Date: Wed, 6 May 2026 12:53:18 +0200
Subject: [PATCH 4/8] Fix visitors tooltips not appearing

Portal to body escapes overflow-hidden clipping
imposed by the button
---
 assets/js/dashboard/extra/exploration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/dashboard/extra/exploration.js b/assets/js/dashboard/extra/exploration.js
index 3e66b17f6d6d..6725065c0848 100644
--- a/assets/js/dashboard/extra/exploration.js
+++ b/assets/js/dashboard/extra/exploration.js
@@ -413,7 +413,7 @@ function CandidateCard({
           </span>
 
           <span className={`shrink-0 font-medium ${textColor}`}>
-            <Tooltip info={numberLongFormatter(visitorsToShow)}>
+            <Tooltip info={numberLongFormatter(visitorsToShow)} containerRef={{ current: document.body }}>
               {numberShortFormatter(visitorsToShow)}
             </Tooltip>
           </span>

From cfc7adaa0d09fd2fd0855799a116a43327141eef Mon Sep 17 00:00:00 2001
From: Adam Rutkowski <hq@mtod.org>
Date: Wed, 6 May 2026 12:57:20 +0200
Subject: [PATCH 5/8] Format

---
 assets/js/dashboard/extra/exploration.js | 92 ++++++++++++------------
 1 file changed, 47 insertions(+), 45 deletions(-)

diff --git a/assets/js/dashboard/extra/exploration.js b/assets/js/dashboard/extra/exploration.js
index 6725065c0848..bc9474f58361 100644
--- a/assets/js/dashboard/extra/exploration.js
+++ b/assets/js/dashboard/extra/exploration.js
@@ -369,56 +369,58 @@ function CandidateCard({
     ? 'bg-gray-100/60 dark:bg-gray-850'
     : 'hover:bg-gray-100/60 dark:hover:bg-gray-850'
 
+  const labelTooltip = step.includes_subpaths
+    ? `${step.label} > all (${step.subpaths_count})`
+    : step.label
+
   return (
     <li>
-      <button
-        data-exploration-step={isSelected ? colIndex : undefined}
-        className={`group relative w-full text-left text-sm rounded-sm overflow-hidden focus:outline-none ${rowBg}`}
-        onClick={() => onSelect(isSelected ? null : step)}
-      >
-        <div
-          className={`absolute top-0 left-0 h-full rounded-sm transition-[width] ease-in-out ${barBg}`}
-          style={{ width: `${barWidth}%` }}
-        />
+      <Tooltip info={labelTooltip} containerRef={{ current: document.body }}>
+        <button
+          data-exploration-step={isSelected ? colIndex : undefined}
+          className={`group relative w-full text-left text-sm rounded-sm overflow-hidden focus:outline-none ${rowBg}`}
+          onClick={() => onSelect(isSelected ? null : step)}
+        >
+          <div
+            className={`absolute top-0 left-0 h-full rounded-sm transition-[width] ease-in-out ${barBg}`}
+            style={{ width: `${barWidth}%` }}
+          />
 
-        <div className="relative flex items-center justify-between gap-2 px-2 py-1.5">
-          <span
-            className={`flex items-center gap-1.5 min-w-0 ${textColor}`}
-            title={
-              step.includes_subpaths
-                ? `${step.label} > all (${step.subpaths_count})`
-                : step.label
-            }
-          >
-            {(isCustomEvent || isGoal) && (
-              <CursorIcon
-                title={isGoal ? 'Goal' : 'Custom event'}
-                className={`size-4 shrink-0 ${textColor}`}
-              />
-            )}
-            <span className="truncate">{step.label}</span>
-            {step.includes_subpaths && (
-              <>
-                <ChevronRightIcon
-                  className={`mt-0.5 size-3 shrink-0 ${subpathColor}`}
+          <div className="relative flex items-center justify-between gap-2 px-2 py-1.5">
+            <span className={`flex items-center gap-1.5 min-w-0 ${textColor}`}>
+              {(isCustomEvent || isGoal) && (
+                <CursorIcon
+                  title={isGoal ? 'Goal' : 'Custom event'}
+                  className={`size-4 shrink-0 ${textColor}`}
                 />
-                <span className={`shrink-0 ${subpathColor}`}>
-                  all{' '}
-                  <span className="text-[0.85rem]">
-                    ({numberShortFormatter(step.subpaths_count)})
+              )}
+              <span className="truncate">{step.label}</span>
+              {step.includes_subpaths && (
+                <>
+                  <ChevronRightIcon
+                    className={`mt-0.5 size-3 shrink-0 ${subpathColor}`}
+                  />
+                  <span className={`shrink-0 ${subpathColor}`}>
+                    all{' '}
+                    <span className="text-[0.85rem]">
+                      ({numberShortFormatter(step.subpaths_count)})
+                    </span>
                   </span>
-                </span>
-              </>
-            )}
-          </span>
-
-          <span className={`shrink-0 font-medium ${textColor}`}>
-            <Tooltip info={numberLongFormatter(visitorsToShow)} containerRef={{ current: document.body }}>
-              {numberShortFormatter(visitorsToShow)}
-            </Tooltip>
-          </span>
-        </div>
-      </button>
+                </>
+              )}
+            </span>
+
+            <span className={`shrink-0 font-medium ${textColor}`}>
+              <Tooltip
+                info={numberLongFormatter(visitorsToShow)}
+                containerRef={{ current: document.body }}
+              >
+                {numberShortFormatter(visitorsToShow)}
+              </Tooltip>
+            </span>
+          </div>
+        </button>
+      </Tooltip>
     </li>
   )
 }

From 9cf02a7258e845620f6e2af95325967b8f500352 Mon Sep 17 00:00:00 2001
From: Adam Rutkowski <hq@mtod.org>
Date: Wed, 6 May 2026 13:10:47 +0200
Subject: [PATCH 6/8] Revert "Format"

This reverts commit 974b249dc84c92b576efbd9d588d3b3ebcad797a.
---
 assets/js/dashboard/extra/exploration.js | 92 ++++++++++++------------
 1 file changed, 45 insertions(+), 47 deletions(-)

diff --git a/assets/js/dashboard/extra/exploration.js b/assets/js/dashboard/extra/exploration.js
index bc9474f58361..6725065c0848 100644
--- a/assets/js/dashboard/extra/exploration.js
+++ b/assets/js/dashboard/extra/exploration.js
@@ -369,58 +369,56 @@ function CandidateCard({
     ? 'bg-gray-100/60 dark:bg-gray-850'
     : 'hover:bg-gray-100/60 dark:hover:bg-gray-850'
 
-  const labelTooltip = step.includes_subpaths
-    ? `${step.label} > all (${step.subpaths_count})`
-    : step.label
-
   return (
     <li>
-      <Tooltip info={labelTooltip} containerRef={{ current: document.body }}>
-        <button
-          data-exploration-step={isSelected ? colIndex : undefined}
-          className={`group relative w-full text-left text-sm rounded-sm overflow-hidden focus:outline-none ${rowBg}`}
-          onClick={() => onSelect(isSelected ? null : step)}
-        >
-          <div
-            className={`absolute top-0 left-0 h-full rounded-sm transition-[width] ease-in-out ${barBg}`}
-            style={{ width: `${barWidth}%` }}
-          />
+      <button
+        data-exploration-step={isSelected ? colIndex : undefined}
+        className={`group relative w-full text-left text-sm rounded-sm overflow-hidden focus:outline-none ${rowBg}`}
+        onClick={() => onSelect(isSelected ? null : step)}
+      >
+        <div
+          className={`absolute top-0 left-0 h-full rounded-sm transition-[width] ease-in-out ${barBg}`}
+          style={{ width: `${barWidth}%` }}
+        />
 
-          <div className="relative flex items-center justify-between gap-2 px-2 py-1.5">
-            <span className={`flex items-center gap-1.5 min-w-0 ${textColor}`}>
-              {(isCustomEvent || isGoal) && (
-                <CursorIcon
-                  title={isGoal ? 'Goal' : 'Custom event'}
-                  className={`size-4 shrink-0 ${textColor}`}
+        <div className="relative flex items-center justify-between gap-2 px-2 py-1.5">
+          <span
+            className={`flex items-center gap-1.5 min-w-0 ${textColor}`}
+            title={
+              step.includes_subpaths
+                ? `${step.label} > all (${step.subpaths_count})`
+                : step.label
+            }
+          >
+            {(isCustomEvent || isGoal) && (
+              <CursorIcon
+                title={isGoal ? 'Goal' : 'Custom event'}
+                className={`size-4 shrink-0 ${textColor}`}
+              />
+            )}
+            <span className="truncate">{step.label}</span>
+            {step.includes_subpaths && (
+              <>
+                <ChevronRightIcon
+                  className={`mt-0.5 size-3 shrink-0 ${subpathColor}`}
                 />
-              )}
-              <span className="truncate">{step.label}</span>
-              {step.includes_subpaths && (
-                <>
-                  <ChevronRightIcon
-                    className={`mt-0.5 size-3 shrink-0 ${subpathColor}`}
-                  />
-                  <span className={`shrink-0 ${subpathColor}`}>
-                    all{' '}
-                    <span className="text-[0.85rem]">
-                      ({numberShortFormatter(step.subpaths_count)})
-                    </span>
+                <span className={`shrink-0 ${subpathColor}`}>
+                  all{' '}
+                  <span className="text-[0.85rem]">
+                    ({numberShortFormatter(step.subpaths_count)})
                   </span>
-                </>
-              )}
-            </span>
-
-            <span className={`shrink-0 font-medium ${textColor}`}>
-              <Tooltip
-                info={numberLongFormatter(visitorsToShow)}
-                containerRef={{ current: document.body }}
-              >
-                {numberShortFormatter(visitorsToShow)}
-              </Tooltip>
-            </span>
-          </div>
-        </button>
-      </Tooltip>
+                </span>
+              </>
+            )}
+          </span>
+
+          <span className={`shrink-0 font-medium ${textColor}`}>
+            <Tooltip info={numberLongFormatter(visitorsToShow)} containerRef={{ current: document.body }}>
+              {numberShortFormatter(visitorsToShow)}
+            </Tooltip>
+          </span>
+        </div>
+      </button>
     </li>
   )
 }

From 1c4a609c5974e6d834d9ec4510be262ca6d8b3f2 Mon Sep 17 00:00:00 2001
From: Adam Rutkowski <hq@mtod.org>
Date: Wed, 6 May 2026 13:11:19 +0200
Subject: [PATCH 7/8] Format

---
 assets/js/dashboard/extra/exploration.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/js/dashboard/extra/exploration.js b/assets/js/dashboard/extra/exploration.js
index 6725065c0848..2686c97a14fc 100644
--- a/assets/js/dashboard/extra/exploration.js
+++ b/assets/js/dashboard/extra/exploration.js
@@ -413,7 +413,10 @@ function CandidateCard({
           </span>
 
           <span className={`shrink-0 font-medium ${textColor}`}>
-            <Tooltip info={numberLongFormatter(visitorsToShow)} containerRef={{ current: document.body }}>
+            <Tooltip
+              info={numberLongFormatter(visitorsToShow)}
+              containerRef={{ current: document.body }}
+            >
               {numberShortFormatter(visitorsToShow)}
             </Tooltip>
           </span>

From fea4cc6f3df6f1d82f6a7f4a90576f2236248d33 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Wed, 6 May 2026 13:36:05 +0200
Subject: [PATCH 8/8] Only render tooltip with long number format for visitors
 >= 1k

---
 assets/js/dashboard/extra/exploration.js | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/assets/js/dashboard/extra/exploration.js b/assets/js/dashboard/extra/exploration.js
index 2686c97a14fc..635fc5aeb945 100644
--- a/assets/js/dashboard/extra/exploration.js
+++ b/assets/js/dashboard/extra/exploration.js
@@ -413,12 +413,7 @@ function CandidateCard({
           </span>
 
           <span className={`shrink-0 font-medium ${textColor}`}>
-            <Tooltip
-              info={numberLongFormatter(visitorsToShow)}
-              containerRef={{ current: document.body }}
-            >
-              {numberShortFormatter(visitorsToShow)}
-            </Tooltip>
+            <VisitorsMetric visitors={visitorsToShow} />
           </span>
         </div>
       </button>
@@ -426,6 +421,22 @@ function CandidateCard({
   )
 }
 
+function VisitorsMetric({ visitors }) {
+  const shortNumber = numberShortFormatter(visitors)
+  const longNumber = numberLongFormatter(visitors)
+  const showTooltip = shortNumber !== longNumber
+
+  if (showTooltip) {
+    return (
+      <Tooltip info={longNumber} containerRef={{ current: document.body }}>
+        {shortNumber}
+      </Tooltip>
+    )
+  } else {
+    return shortNumber
+  }
+}
+
 function ColumnEmptyState({ active, filter, colIndex, direction }) {
   if (!active) {
     const prompt =