From d3b7c3111fc11ba00603161ff611ee3fa4aa238d Mon Sep 17 00:00:00 2001
From: Nishant Bangarwa <nishant.monu51@gmail.com>
Date: Thu, 3 Sep 2026 20:14:41 +0530
Subject: [PATCH 1/2] fix(pivot): wrap long values in cell hover tooltip

The Pivot's hover tooltip renders through `TooltipTitle`, which
hard-coded `truncate` on the value, so long cell values collapsed to
a single ellipsized line regardless of the tooltip's width. Explore's
leaderboard doesn't share this component, which is why wrapping
already worked there.

`TooltipTitle` now takes a `wrap` prop (default off, preserving the
~30 other call sites), and `VirtualTooltip` (used by the Pivot and
dimension table) opts in.

Claude-Session: https://claude.ai/code/session_011b89i38746941dRXzqWSXd
---
 .../src/components/tooltip/TooltipTitle.svelte   | 16 +++++++++++++++-
 .../virtualized-table/VirtualTooltip.svelte      |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web-common/src/components/tooltip/TooltipTitle.svelte b/web-common/src/components/tooltip/TooltipTitle.svelte
index 3b8a940dd046..383470446d19 100644
--- a/web-common/src/components/tooltip/TooltipTitle.svelte
+++ b/web-common/src/components/tooltip/TooltipTitle.svelte
@@ -1,9 +1,23 @@
+<script lang="ts">
+  /**
+   * By default the name is kept on a single line and ellipsized. Set this to
+   * let long values wrap across multiple lines instead, so the full text is
+   * readable on hover.
+   */
+  export let wrap = false;
+</script>
+
 <div
   class="grid gap-x-2 pointer-events-none pt-1 pb-1 items-baseline"
   style="grid-template-columns: auto max-content"
   style:min-width="200px"
 >
-  <div class="font-bold truncate text-fg-inverse" aria-label="tooltip-name">
+  <div
+    class="font-bold text-fg-inverse"
+    class:truncate={!wrap}
+    class:break-words={wrap}
+    aria-label="tooltip-name"
+  >
     <slot name="name" />
   </div>
   <div
diff --git a/web-common/src/components/virtualized-table/VirtualTooltip.svelte b/web-common/src/components/virtualized-table/VirtualTooltip.svelte
index 7b6cc8d3e9a8..707d78d3be93 100644
--- a/web-common/src/components/virtualized-table/VirtualTooltip.svelte
+++ b/web-common/src/components/virtualized-table/VirtualTooltip.svelte
@@ -34,7 +34,7 @@
     {#if hovering.isPin}
       {pinned ? "Unpin" : "Pin"} this column to left side of the table
     {:else}
-      <TooltipTitle>
+      <TooltipTitle wrap>
         <svelte:fragment slot="name">
           {#if hovering.isHeader}
             {hovering.value}

From 803593d427e208da2d71f95e4d223a2997e63e03 Mon Sep 17 00:00:00 2001
From: Nishant Bangarwa <nishant.monu51@gmail.com>
Date: Fri, 4 Sep 2026 17:42:35 +0530
Subject: [PATCH 2/2] fix(pivot): make tooltip wrapping work for unbroken
 values

`break-words` alone did not wrap the values this change targets. Without
`overflow: hidden` the name is a grid item sized to its min-content width,
and `overflow-wrap: break-word` contributes no break opportunities to
min-content, so a single unbroken token (a URL, a UUID) overflowed the
360px tooltip instead of wrapping. `min-w-0` lets the item shrink so the
break actually happens.

Also scope `wrap` to cell values: header tooltips in the source/model
preview keep their previous single-line ellipsis, and the type in the
description slot stays baseline-aligned.

Claude-Session: https://claude.ai/code/session_01NGUuWWbkeCTrYXrDPLwXG3
---
 web-common/src/components/tooltip/TooltipTitle.svelte      | 7 +++++++
 .../src/components/virtualized-table/VirtualTooltip.svelte | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web-common/src/components/tooltip/TooltipTitle.svelte b/web-common/src/components/tooltip/TooltipTitle.svelte
index 383470446d19..d92d4ac606e2 100644
--- a/web-common/src/components/tooltip/TooltipTitle.svelte
+++ b/web-common/src/components/tooltip/TooltipTitle.svelte
@@ -12,10 +12,17 @@
   style="grid-template-columns: auto max-content"
   style:min-width="200px"
 >
+  <!--
+    `min-w-0` is required alongside `break-words`: without it the grid item is sized
+    to its min-content width, and `overflow-wrap: break-word` does not contribute
+    break opportunities to min-content, so a single unbroken value (a URL, a UUID)
+    would overflow the tooltip instead of wrapping.
+  -->
   <div
     class="font-bold text-fg-inverse"
     class:truncate={!wrap}
     class:break-words={wrap}
+    class:min-w-0={wrap}
     aria-label="tooltip-name"
   >
     <slot name="name" />
diff --git a/web-common/src/components/virtualized-table/VirtualTooltip.svelte b/web-common/src/components/virtualized-table/VirtualTooltip.svelte
index 707d78d3be93..a6a69bd17d66 100644
--- a/web-common/src/components/virtualized-table/VirtualTooltip.svelte
+++ b/web-common/src/components/virtualized-table/VirtualTooltip.svelte
@@ -34,7 +34,7 @@
     {#if hovering.isPin}
       {pinned ? "Unpin" : "Pin"} this column to left side of the table
     {:else}
-      <TooltipTitle wrap>
+      <TooltipTitle wrap={!hovering.isHeader}>
         <svelte:fragment slot="name">
           {#if hovering.isHeader}
             {hovering.value}