Repository navigation
Conversation
kmcginnes
requested changes
Oct 13, 2026
kmcginnes
left a comment
Collaborator
There was a problem hiding this comment.
2 Important, 3 Nit.
Thanks for the contribution, @vishwakt, and for the clear before/after screenshots. I confirmed the fix in Firefox and Safari: resized headers truncate and no longer overlap the next column.
Please rebase onto the latest main. The branch is about two months behind and CI hasn't run on it yet. main now also expects a blank line after the // @vitest-environment happy-dom directive, so the format check may flag the new test file after the rebase.
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. String headers set the header cell's title to the full name, with a sort hint on sortable columns in place of react-table's generic "Toggle SortBy" tooltip. Fixes aws#2083
With headers truncating instead of wrapping, both labels were cut off at the default 100px width.
vishwakt
force-pushed
the
issue-2083-header-truncation
branch
from
October 13, 2026 23:36
56c9ae7 to
abaa05f
Compare
Contributor
Author
|
@kmcginnes i've rebased onto |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2083
Root Cause
Two stacked problems in
TabularHeader.tsx: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.text-ellipsisclass was gated on a per-columnoverflowoption that the Data Explorer never sets, and withoutwhitespace-nowrapit had no effect even where it was set.Fix
Header labels now always truncate (
min-w-0+truncate), and string headers carry atitleattribute so hovering reveals the full name, as requested in the issue. Columns with a customheaderComponentare left untouched and get no title.Testing
titleattribute, which headless screenshots cannot capture, so the capture log verifies the attribute in the DOM instead.Before (resized columns, header names overlap):
After (same columns, names truncate with an ellipsis; hover shows the full name):