From b4e2694c5b0cffc7994a5cfab84862e07a0605c6 Mon Sep 17 00:00:00 2001
From: Tom Alexander <teeohhem@gmail.com>
Date: Thu, 7 May 2026 11:16:01 -0400
Subject: [PATCH 1/2] fix(table-chart): restore wrap mode for long unbreakable
 strings

The Bootstrap removal refactor (#1347) deleted .text-break, .align-top,
and the .align-{middle,bottom} utility classes from
_bootstrap-utilities.scss but left HDXMultiSeriesTableChart.tsx and
DBRowTable.tsx still referencing .text-break and .align-top by name.

With .text-break undefined, toggling wrap mode on a Table chart cell
containing a long URL/identifier without whitespace leaves the cell
with only overflow: hidden and default word-break: normal. The browser
can't break the string, partial fragments leak across cell boundaries
during fallback rendering, and the visible result is text appearing to
overlap into adjacent columns.

Re-add the missing utility classes, and as a belt-and-suspenders
containment add overflow: hidden to <td> and max-width: 100% to the
inner cell <div> in HDXMultiSeriesTableChart so layout can never push
content past the cell boundary regardless of word-break behavior.
---
 packages/app/src/HDXMultiSeriesTableChart.tsx | 21 ++++++++++++++++---
 packages/app/styles/_bootstrap-utilities.scss | 20 ++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
index 6d449c6c58..f4d0de403b 100644
--- a/packages/app/src/HDXMultiSeriesTableChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -146,13 +146,20 @@ export const Table = ({
                 'text-truncate': !wrapLinesEnabled,
               });
 
+              // maxWidth: 100% prevents long unbreakable strings (URLs,
+              // hashes) from forcing the inner div wider than the table
+              // cell, which would visually overflow into the next column.
+              const cellDivStyle: React.CSSProperties = {
+                maxWidth: '100%',
+              };
+
               if (onRowClick) {
                 return (
                   <div
                     role="link"
                     tabIndex={0}
                     className={className}
-                    style={{ cursor: 'pointer' }}
+                    style={{ ...cellDivStyle, cursor: 'pointer' }}
                     // Left-click: fires onClick with button === 0. The parent
                     // handler detects meta/ctrl for cmd/ctrl-click → new tab.
                     onClick={e => onRowClick(row.original, e)}
@@ -180,7 +187,11 @@ export const Table = ({
                 );
               }
 
-              return <div className={className}>{formattedValue}</div>;
+              return (
+                <div className={className} style={cellDivStyle}>
+                  {formattedValue}
+                </div>
+              );
             },
             size:
               i === numColumns - 2
@@ -336,7 +347,11 @@ export const Table = ({
               >
                 {row.getVisibleCells().map(cell => {
                   return (
-                    <td key={cell.id} title={`${cell.getValue()}`}>
+                    <td
+                      key={cell.id}
+                      title={`${cell.getValue()}`}
+                      style={{ overflow: 'hidden' }}
+                    >
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext(),
diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
index fa97c1583c..6fa6fee8cb 100644
--- a/packages/app/styles/_bootstrap-utilities.scss
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -968,6 +968,26 @@
   white-space: nowrap !important;
 }
 
+// Word break — needed for cells in wrap mode so long URLs/identifiers
+// without whitespace can break instead of overflowing into the next column.
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+// Vertical alignment — applies to table cells (and inline/inline-block).
+.align-top {
+  vertical-align: top !important;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+.align-bottom {
+  vertical-align: bottom !important;
+}
+
 // Font size utilities
 .fs-1 {
   font-size: 2.5rem !important; // 40px

From 430339e920d42ac843c1081de20bb1b4d5436309 Mon Sep 17 00:00:00 2001
From: Tom Alexander <teeohhem@gmail.com>
Date: Thu, 7 May 2026 11:21:58 -0400
Subject: [PATCH 2/2] changeset

The table chart's wrap mode has been updated to handle long URLs and IDs by breaking them instead of allowing overflow into adjacent columns.
---
 .changeset/cool-bikes-suffer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cool-bikes-suffer.md

diff --git a/.changeset/cool-bikes-suffer.md b/.changeset/cool-bikes-suffer.md
new file mode 100644
index 0000000000..07cf1f4359
--- /dev/null
+++ b/.changeset/cool-bikes-suffer.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix(table-chart): wrap mode now breaks long URLs/IDs instead of overflowing into adjacent columns