fix(tabs): Prevent tabs from collapsing into the overflow menu when they exactly fit - #124248
Open
aashutoshrathi wants to merge 1 commit into
Open
fix(tabs): Prevent tabs from collapsing into the overflow menu when they exactly fit#124248aashutoshrathi wants to merge 1 commit into
aashutoshrathi wants to merge 1 commit into
Conversation
aashutoshrathi
marked this pull request as ready for review
September 13, 2026 08:16
aashutoshrathi
force-pushed
the
fix/tabs-overflow-subpixel-measure
branch
from
September 13, 2026 08:20
704e651 to
cf0d580
Compare
aashutoshrathi
force-pushed
the
fix/tabs-overflow-subpixel-measure
branch
3 times, most recently
from
September 13, 2026 08:30
5090427 to
7a1dc36
Compare
Author
|
@priscilawebdev this is a small follow-up to #123879. After |
…hey exactly fit useOverflowTabs compared the wrapper's integer clientWidth against the fractional sum of the tabs' getBoundingClientRect widths. In a shrink-to-fit container the two differ by a fraction of a pixel, the last tab is moved into the overflow menu, the container shrinks around the remaining tabs, and the check fails again until only the first tab is left with the trigger drawn over it. The issue details event navigation hit this after getsentry#123879 removed disableOverflow. Measure the wrapper with getBoundingClientRect so both sides use the same precision.
aashutoshrathi
force-pushed
the
fix/tabs-overflow-subpixel-measure
branch
from
September 13, 2026 09:54
7a1dc36 to
8a8d4c2
Compare
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
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.
Since #123879 turned on automatic overflow for every tab list, the event navigation on the issue details page shows only the "First" tab, with the "..." trigger drawn on top of it, at every viewport width. "Latest" and "Recommended" sit in the overflow menu.
useOverflowTabscompares the wrapper'sclientWidth, which browsers round to a whole pixel, against the sum of the tabs'getBoundingClientRect()widths, which is fractional. That tab list lives in a shrink-to-fit flex item, so the wrapper is exactly as wide as its tabs (for example 223.078px, reported as 223). The check fails by a fraction of a pixel, the last tab is hidden, the wrapper shrinks around the remaining tabs, theResizeObserverfires and the check fails again, until only the always-kept first tab is left and the budget is negative.This measures the wrapper with
getBoundingClientRect().widthso both sides of the comparison come from the same source. The overflow tests now feed the container width through the same mock instead of aclientWidthoverride, and a new test covers a container that is filled to a fraction of a pixel; it fails without the fix. Verified on the issue details page against the dev UI server and in headless Chromium from 520px to 1440px.Fixes #124247
Legal Boilerplate
Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.