Skip to content

fix: truncate table header names with ellipsis instead of overlapping - #2084

Open
vishwakt wants to merge 1 commit into
aws:mainfrom
vishwakt:issue-2083-header-truncation
Open

fix: truncate table header names with ellipsis instead of overlapping#2084
vishwakt wants to merge 1 commit into
aws:mainfrom
vishwakt:issue-2083-header-truncation

Conversation

@vishwakt

@vishwakt vishwakt commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Fixes #2083

Root Cause

Two stacked problems in TabularHeader.tsx:

  1. The header label sits in a CSS grid cell without min-w-0, so the grid item cannot shrink below the label's min-content width. Shrinking a column makes the label overflow the header cell and overlap the neighboring column.
  2. The text-ellipsis class was gated on a per-column overflow option that the Data Explorer never sets, and without whitespace-nowrap it had no effect even where it was set.

Fix

Header labels now always truncate (min-w-0 + truncate), and string headers carry a title attribute so hovering reveals the full name, as requested in the issue. Columns with a custom headerComponent are left untouched and get no title.

Testing

  • Added a component test asserting the title attribute and truncation class, and that custom header components get no title attribute.
  • Reproduced the issue's exact steps against a local TinkerPop Gremlin Server seeded with long property names, resizing the header columns smaller. Screenshots below.
  • The hover reveal uses the native browser tooltip via the title attribute, which headless screenshots cannot capture, so the capture log verifies the attribute in the DOM instead.

Before (resized columns, header names overlap):

before-header

After (same columns, names truncate with an ellipsis; hover shows the full name):

after-header

Header labels rendered in a grid cell without min-w-0 or
whitespace-nowrap, so shrinking a column let the label's min-content
width overflow the header cell and overlap the neighboring column. The
text-ellipsis class was also gated on a per-column overflow option that
Data Explorer never sets, and without nowrap it had no effect anyway.

Header labels now always truncate with an ellipsis, and string headers
carry a title attribute so hovering reveals the full name.

Fixes aws#2083
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The header names in the Data Explorer's Data Table are overlapping.

1 participant