Fix horizontal overflow when the transform navigator is long#6199
Merged
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6199 +/- ##
=======================================
Coverage 83.63% 83.63%
=======================================
Files 346 346
Lines 37174 37174
Branches 10318 10417 +99
=======================================
Hits 31090 31090
Misses 5656 5656
Partials 428 428 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
fatadel
approved these changes
Jul 20, 2026
fatadel
left a comment
fatadel
left a comment
Contributor
There was a problem hiding this comment.
Thanks for the PR! Left 2 nits.
canova
force-pushed
the
push-mvzqonlopvlq
branch
from
July 20, 2026 14:07
742226c to
3c907f0
Compare
.Details relied on `overflow: clip` to avoid spilling its contents over neighboring panels. But `overflow: clip` is not a scroll container, so it doesn't zero out the flex automatic minimum size the way a scroll container would. As a flex item of .DetailsContainer, .Details kept its content-based min-width and refused to shrink below the min-content width of its widest child. A long transform navigator then could push .Details past its container, overflowed the `contain: size` DetailsContainer (which doesn't clip), and gave the whole viewport a horizontal scrollbar. This regressed in firefox-devtools#4606, which replaced react-splitter-layout (whose absolutely-positioned panes gave .Details a definite width) with flexbox. That PR added `min-width: 0` to the sidebar wrapper but not to .Details.
canova
force-pushed
the
push-mvzqonlopvlq
branch
from
July 20, 2026 14:08
3c907f0 to
82e2512
Compare
canova
enabled auto-merge (squash)
July 20, 2026 14:08
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.
Main | Deploy preview
Fixes #6198
.Details relied on
overflow: clipto avoid spilling its contents over neighboring panels. Butoverflow: clipis not a scroll container, so it doesn't zero out the flex automatic minimum size the way a scroll container would. As a flex item of .DetailsContainer, .Details kept its content-based min-width and refused to shrink below the min-content width of its widest child. A long transform navigator then could push .Details past its container, overflowed thecontain: sizeDetailsContainer (which doesn't clip), and gave the whole viewport a horizontal scrollbar.This regressed in #4606, which replaced react-splitter-layout (whose absolutely-positioned panes gave .Details a definite width) with flexbox. That PR added
min-width: 0to the sidebar wrapper but not to .Details.