Skip to content

Fix horizontal overflow when the transform navigator is long - #6199

Merged
canova merged 1 commit into
firefox-devtools:mainfrom
canova:push-mvzqonlopvlq
Jul 20, 2026
Merged

Fix horizontal overflow when the transform navigator is long#6199
canova merged 1 commit into
firefox-devtools:mainfrom
canova:push-mvzqonlopvlq

Conversation

@canova

@canovacanova commented Jul 17, 2026

Copy link
Copy Markdown
Member

Main | Deploy preview

Fixes#6198

.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 #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
canova requested review from fatadel and mstangeJuly 17, 2026 14:12
@codecov

codecovBot commented Jul 17, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.63%. Comparing base (d4b6ff9) to head (82e2512).
⚠️ Report is 3 commits behind head on main.

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.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@fatadelfatadel left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR! Left 2 nits.

Comment threadsrc/components/app/Details.css Outdated
@canova
canovaforce-pushed the push-mvzqonlopvlq branch from 742226c to 3c907f0CompareJuly 20, 2026 14:07
.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
canovaforce-pushed the push-mvzqonlopvlq branch from 3c907f0 to 82e2512CompareJuly 20, 2026 14:08
@canova
canova enabled auto-merge (squash) July 20, 2026 14:08
@canova
canova merged commit 0b16bb3 into firefox-devtools:mainJul 20, 2026
21 checks passed
@canovacanova mentioned this pull request Jul 21, 2026
canova added a commit that referenced this pull request Jul 21, 2026
Changes:
[Sky Ning] Skip preview links for non-main PRs (#6161)
[spokodev] fix(gecko-upgrade): don't crash on a counter with empty
sample_groups (#6160)
[fatadel] Show counter values over time in profiler-cli (#6136)
[Markus Stange] Make profile-conversion snapshots more compact and
meaningful (#6152)
[Markus Stange] More typed arrays: sample + counter times, some
frametable columns (#6139)
[Nazım Can Altınova] Only render a marker url field as a link when the
whole value is a URL (#6163)
[fatadel] Show each counter's owning process in profiler-cli (#6164)
[Nazım Can Altınova] Document the pre-existing thread info and network
JSON schemas in the cli (#6171)
[Markus Stange] Copy column contents in
getRawSamplesTableBuilderFromExisting for consistency (#6168)
[Markus Stange] Convert eligible columns to typed arrays when outputting
from profiler-edit (#6167)
[Markus Stange] Remove unused samples.thread column (#6151)
[Markus Stange] Fixed botched merge which broke 'yarn ts' (#6174)
[Nazım Can Altınova] Add marker handles to `profiler-cli thread network`
(#6172)
[Markus Stange] Update json-slabs 0.3.0 → 0.4.0 (major) (#6176)
[Nazım Can Altınova] Surface network activity across profiler-cli
(#6175)
[Nazım Can Altınova] Add `profile meta` command to profiler-cli (#6177)
[Markus Stange] Allow raw marker table's `startTime` and `endTime`
columns to be Float64Array (#6169)
[nightcityblade] Fix light theme text selection colors (#6186)
[Nazım Can Altınova] Import source map URLs from Chrome DevTools traces
(#6190)
[Nazım Can Altınova] Rename yarn `build-profiler-cli` script to
`build-cli` (#6191)
[Nazım Can Altınova] Migrate husky to version 9 (#6201)
[Nazım Can Altınova] Fix horizontal overflow when the transform
navigator is long (#6199)
[fatadel] Add a 'hexadecimal' marker schema field format (#6197)
[Nazım Can Altınova] Bump source-map to 0.8.0 and remove the old type
workaround (#6202)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (July 21, 2026) (#6209)
And special thanks to our localizers:
fr: parmegiani.thomas
fr: Théo Chevalier
sr: Марко Костић (Marko Kostić)
sv-SE: Luna Jernberg
tr: Grk
zh-CN: Ariel
zh-CN: Olvcpr423
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

When transform navigation bar has a lot of transforms the whole width of the bottom panels overflows

2 participants

@canova@fatadel