fix(trees): keep deep flattened paths readable (#941)#997
Open
pablofdezr wants to merge 1 commit into
Open
Conversation
Every segment of a flattened directory row rendered its own Truncate, so
each one shrank and truncated independently. A deep single-child path
spent the row on ellipses instead of on the path ("t… / kc… / … / se…"),
and a narrow enough row showed nothing else.
Split the path where the `leaf-path` split does, at the last separator,
and hand the halves to MiddleTruncate with the terminal directory
prioritised. The leading run absorbs the shrinking while the directory
the row actually opens holds its width: "test / kotlin / com… / server".
MiddleTruncate renders each half twice, once hidden to detect overflow,
which would have duplicated the per-segment data attributes that drag and
drop and the tests query. Only the text metrics of the hidden copy matter,
so OverflowText takes a `measureChildren` stand-in for it and
MiddleTruncate a `measureContents` pair.
Renaming keeps the flex line it had, where the input sizes itself against
a flex item.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@pablofdezr is attempting to deploy a commit to the Pierre Computer Company Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
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
1 participant
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.
Description
In the file tree, a deep path gets flattened onto a single line and each segment gets truncated on its own. The result is
ı… / k… / … / hanne… / … / s…: nothing but ellipses that don't tell you which folder the row actually opens.The fix splits the path at the last separator. The head half (the intermediate directories) absorbs the shrinking, while the terminal directory (the one the row actually opens) keeps its full width. That way
implorservershow up complete instead ofs….MiddleTruncaterenders each half twice, once hidden to detect overflow, which would have duplicated the per-segment data attributes that drag and drop and the tests query. Only the text metrics of the hidden copy matter, soOverflowTexttakes ameasureChildrenstand-in andMiddleTruncateameasureContentspair.The
\u00a0detailThe first version dropped the space before the final slash: the separator opens the second half, its leading space lands at the start of the line, and the browser collapses it. Fixed with
\u00a0(non-breaking space) so it doesn't collapse, and so it's visible in the diff instead of being an invisible character.Motivation & Context
Fixes #941. A deeply nested single-child path is exactly the case where the row's text matters most, and it was the case that rendered worst: on a narrow enough row, nothing readable survived.
Two things worth flagging:
OverflowContent/OverflowMarker, right wheremeasureChildrenlives, so if [trees][wip] MiddleTruncation from css grid hack to text-overflow: ellipsis #939 lands first, this fix gets simpler.leaf-pathwas already written and unused (OverflowText.tsx:141), a sign you'd already thought about this case. This PR splits at the same boundary, though it splits inFileTreeViewrather than passingsplit="leaf-path", since the halves need to stay as nodes rather than a string.Type of changes
Checklist
oxlint --type-awareandstylelintclean)oxfmt --check: all matched files use the correct format)bun testinpackages/trees: 324 pass, 0 fail)How was AI used in generating this PR
Disclosing this in full, since the guidelines ask for the extent and not just the fact.
OverflowText.tsx,FileTreeView.tsx,style.css) and both test files were written by Claude (Opus 4.8) working under my direction, not typed by me. This is recorded in theCo-Authored-Bytrailer on the commit.leaf-pathsplit boundary instead of inventing a custom one, and checking whether [trees][wip] MiddleTruncation from css grid hack to text-overflow: ellipsis #939 already covered this before any code was written.Related issues
Closes #941.
Related: #939 (touches the same
OverflowTextinternals).