fix: viewer affordance for text/blob/json and overflow-detected cells (#216) - #221
Merged
Conversation
…#216) TruncatedCell had three problems compounding: 1. Sliced text at 47 chars + '...' in JS at render time, so dragging a column wider never revealed more of the value. 2. Offered no viewer affordance for short text/blob/json values, even though those types are inherently multi-line / structured and benefit from the formatted viewer regardless of length. 3. Used a character-length heuristic (>50) to decide whether the cell was 'truncated', which didn't reflect actual visible overflow. Fix: - Render the full value via CSS truncation (text-overflow: ellipsis). Cell reflows as the column resizes. Closes #216. - Show a viewer affordance (Maximize2 icon button) on every cell where it is useful. Icon appears when EITHER: (a) dataType matches /text|blob|json|mediumtext|longtext/i and value length >= 20, OR (b) actual visual overflow is detected by ResizeObserver. Icon disappears the moment the column widens enough (ResizeObserver re-checks after each resize). - Icon click opens the viewer and stops propagation so row selection is unaffected. Double-click on the cell is kept as a fallback affordance for users without an icon shown (e.g. non-truncated non-text values). - ResizeObserver + rAF debounce so a flurry of resize events collapse to a single scrollWidth/clientWidth check per frame. - TruncatedCell now takes an optional dataType prop. ResultsGrid passes col.data_type from the result set. Tests: - 19 cases covering NULL, primitive types, full-text render, no-icon for short non-text, icon for each text/blob/json variant, overflow via ResizeObserver, hide-on-widen, icon click triggers viewer, stopPropagation, double-click fallback on/off.
EVWorth
force-pushed
the
fix/216-truncated-cell
branch
from
July 19, 2026 18:42
df54f5a to
51194c5
Compare
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.
What
Fixes three compounding bugs in
TruncatedCell:isLongValue = length > 50was used to decide truncation visibility — didn't match actual visual overflow.Why
The first is the literal #216 report. The second and third are downstream consequences of the same heuristic that the bug exposed.
Changes
src/components/grid/TruncatedCell.tsxformatValue(value)via CSStruncate. Add ResizeObserver-drivenisOverflowingstate + rAF debounce. Render aMaximize2icon button whenshowForTextType(text/blob/json type AND ≥ 20 chars) ORisOverflowing. Add optionaldataTypeprop. Icon click opens viewer and stops propagation. Double-click kept as fallback.src/components/grid/ResultsGrid.tsxcol.data_typeas the newdataTypeprop.src/components/grid/__tests__/TruncatedCell.test.tsxFakeResizeObserverand a synchronousrequestAnimationFramemock since jsdom doesn't ship either.Reveal rules
Icon is shown when either:
/text|blob|json|mediumtext|longtext/iand the formatted value is ≥ 20 chars and the value is non-null, ORscrollWidth > clientWidth(actual visible overflow).The icon disappears the moment the column widens enough to fit the value — no more stale heuristic.
Verification
npx vitest run src/components/grid/__tests__/TruncatedCell.test.tsxnpx vitest run(full suite)npm run type-checknpx eslint(touched files)npx dprint check(whole repo)Implementation notes
truncatealone givestext-overflow: ellipsis overflow: hidden white-space: nowrap. The wrapping flex row usesmin-w-0so the inner truncate actually measures against the available column width.