List View: Ensure long anchors don't cause the List View to extend #43134
Conversation
This file contains 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
andrewserong
added
[Type] Bug
|
Size Change: +23 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
|
Thanks for the quick follow-up, @andrewserong! |
|
No worries, thanks for reviewing @ramonjd! 🙇 |
13 tasks
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 #43125 where long anchor text would extend the width of the list view even though the text was being truncated. The issue was likely introduced in #41855.
Why?
In the List View, add an additional wrapper around the anchor text, similar to the wrapping of the block title. This ensures that we can us absolute positioning for the anchor text, which prevents the real text content from extending the size of the flexbox. For a description of this kind of problem, there's a helpful CSS Tricks article on the topic: https://css-tricks.com/flexbox-truncated-text/ — in the case of the List View our needs appear to be a little more complex, so the solution in that article
min-content: 0wasn't quite enough. Still, hopefully it helps explain why the issue exists.How?
Add a wrapper to the anchor text in the List View and set the truncated text to use absolute positioning so that it doesn't extend the size of the List View but instead fills the available space.
Testing Instructions
Ensure that long anchor text does not extend the list view as reported in #43125. For ease of testing here's some test markup:
Test markup with a variety of different anchor texts
Screenshots or screencast