fix(PT-4157): inline resource name keeps its ellipsis in narrow panes#2553
Merged
Conversation
The verse-row inline name used a fixed-width, non-shrinking label (max-w-24 shrink-0). In a verse pane narrower than the 96px cap, the label overflowed the pane and its truncation ellipsis was pushed off-screen, so a clipped name showed a hard cut with no "…" (per Tom's review of #2541). Switch shrink-0 -> min-w-0 so the label still caps at max-w-24 when there is room but shrinks to the visible width when the pane is narrow, keeping the ellipsis at the visible edge. Add a narrow-pane Storybook story as a visual/Chromatic guard (grid cell layout is not measurable in jsdom), plus an optional `width` prop on the local CellBox story helper to drive it. Re-applied onto current main after the ScriptureTextGrid zoom/drag-handle rewrite; the fix lands in the (unchanged) inline verse-row branch. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
katherinejensen00
force-pushed
the
pt-4157-inline-name-ellipsis
branch
from
July 17, 2026 17:46
82a7767 to
d9f8906
Compare
…rop "offline" wording Fold in the cleanup from Tom's review of #2557, adapted to the current ScriptureTextGrid file shapes: - Alphabetize the `scriptureTextGrid_cell_*` localization keys within each contiguous run (en and es kept in sync), fixing the not_installed/ unavailable and status_* ordering Tom flagged. - Replace inaccurate "offline" wording in comments with accurate terms now that a real `unavailable` state exists: "status and action labels", "unavailable placeholder", "availability wiring", "non-ready cell", and drop the stray "offline" from the ScriptureTextGrid story blurb. Kept the one legitimate causal use ("failed to download (e.g. offline)"). Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The ellipsis fix is direction-dependent (RTL truncates on the opposite, inline-start/right edge), so guard the RTL half of the same bug with a VerseLongNameNarrowPaneRightToLeft story mirroring the LTR narrow-pane case. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tombogle
approved these changes
Jul 17, 2026
tombogle
left a comment
tombogle
left a comment
Contributor
There was a problem hiding this comment.
@tombogle reviewed 4 files and all commit messages.
Reviewable status:complete! all files reviewed, all discussions resolved.
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
2 participants
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.
Summary
…was rendered off-screen — leaving a hard-cut name with no ellipsis visibletw:shrink-0→tw:min-w-0on the inline name label (one-line change)VerseLongNameNarrowPaneStorybook story (110 px pane, long name) as a permanent visual regression checkDetails
The root cause
text-overflow: ellipsisonly clips text within the element's own layout box.flex-shrink: 0kept the label box at 96 px even when the pane was 70 px — the box physically overflowed the pane and the…landed off-screen.min-width: 0allows the flex item to shrink to the visible width, so the ellipsis always fires at the actual edge.The clip-detecting tooltip (
useTruncationTooltip) was already firing correctly; only the visible…was missing.Changed files
resource-cell-view.component.tsxshrink-0→min-w-0on the inline label; added an explanatory JSX commentresource-cell-view.component.stories.tsxVerseLongNameNarrowPanestory;CellBoxhelper extended with optionalwidthpropWhat was not changed
The header-mode label was already correct — it is a block element (not a flex item) so ellipsis works without
min-w-0.RTL note
The fix is direction-agnostic (
min-width: 0is not directional). The existingVerseLongNameRightToLeftstory covers long RTL names at normal width; a narrow-pane RTL story would be a natural follow-up.Suggested reviewer focus
VerseLongNameNarrowPanestory: open it in Storybook and confirm the…appears at the visible edge of the 110 px paneVerseRightToLeft+VerseLongNameRightToLeft: verify RTL inline-start placement is unaffectedAI-assisted
This change is