Skip to content

fix(tabs): Prevent tabs from collapsing into the overflow menu when they exactly fit - #124248

Open
aashutoshrathi wants to merge 1 commit into
getsentry:masterfrom
aashutoshrathi:fix/tabs-overflow-subpixel-measure
Open

fix(tabs): Prevent tabs from collapsing into the overflow menu when they exactly fit#124248
aashutoshrathi wants to merge 1 commit into
getsentry:masterfrom
aashutoshrathi:fix/tabs-overflow-subpixel-measure

Conversation

@aashutoshrathi

@aashutoshrathi aashutoshrathi commented Sep 13, 2026

Copy link
Copy Markdown

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. useOverflowTabs compares the wrapper's clientWidth, 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, the ResizeObserver fires 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().width so both sides of the comparison come from the same source. The overflow tests now feed the container width through the same mock instead of a clientWidth override, 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.

Description Image
Before )
After (Full Screen) file-fcf34ba725206519b08b293c9f7f4d1d
After (Smaller Screens) [Recommended shortens] file-935940bc463817b43bbfb2cff13b2fc2

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.

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Sep 13, 2026
@aashutoshrathi
aashutoshrathi marked this pull request as ready for review September 13, 2026 08:16
@aashutoshrathi
aashutoshrathi requested a review from a team as a code owner September 13, 2026 08:16
Comment thread static/app/components/core/tabs/tabList.tsx
@aashutoshrathi
aashutoshrathi force-pushed the fix/tabs-overflow-subpixel-measure branch from 704e651 to cf0d580 Compare September 13, 2026 08:20
Comment thread static/app/components/core/tabs/tabs.spec.tsx Outdated
@aashutoshrathi
aashutoshrathi force-pushed the fix/tabs-overflow-subpixel-measure branch 3 times, most recently from 5090427 to 7a1dc36 Compare September 13, 2026 08:30
@aashutoshrathi aashutoshrathi changed the title fix(tabs): Measure the overflow container with sub-pixel precision fix(tabs): Prevent tabs from collapsing into the overflow menu when they exactly fit Sep 13, 2026
@aashutoshrathi

Copy link
Copy Markdown
Author

@priscilawebdev this is a small follow-up to #123879. After disableOverflow was removed, the issue details event navigation collapses to only "First" with the overflow trigger drawn over it (#124247). The cause is the integer clientWidth versus the fractional tab widths in a shrink-to-fit container; details and a repro are in the issue. Would you mind taking a look when you have a moment? The getsentry dispatch check also needs the Trigger: getsentry tests label from a collaborator.

…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
aashutoshrathi force-pushed the fix/tabs-overflow-subpixel-measure branch from 7a1dc36 to 8a8d4c2 Compare September 13, 2026 09:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Issue details event navigation collapses to a single "First" tab with the overflow trigger drawn over it

1 participant