fix: truncate table header names with ellipsis instead of overlapping - #2084
Open
vishwakt wants to merge 1 commit into
Open
fix: truncate table header names with ellipsis instead of overlapping#2084vishwakt wants to merge 1 commit into
vishwakt wants to merge 1 commit into
Conversation
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
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):