Force box-sizing on underline wrapper in wrap mode - #8339
Conversation
Pin box-sizing with !important (alongside the existing border-block and padding-block overrides) on the underline tabbed interface wrapper's wrap-mode rule so an external box-sizing override can't change the height budget used for overflow detection and incorrectly trigger the overflow 'more' menu. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 4aed0d0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
the
integration-tests: recommended
|
There was a problem hiding this comment.
Pull request overview
This PR hardens the wrap-mode wrapper styling for the internal underline tabbed interface by pinning box-sizing with !important, aligning it with existing !important pinning for border-block and padding-block. The goal is to prevent external CSS overrides from altering the wrapper’s effective height and incorrectly triggering the overflow “more” menu logic.
Changes:
- Update the wrap-mode rule in
UnderlineTabbedInterface.module.cssto usebox-sizing: border-box !important. - Update the associated inline comment to reflect that
box-sizingis also being pinned. - Add a patch changeset documenting the behavior hardening.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/internal/components/UnderlineTabbedInterface.module.css | Pins box-sizing with !important in wrap mode to prevent external overrides from affecting overflow detection height budgeting. |
| .changeset/underline-wrapper-force-box-sizing.md | Adds a patch changeset describing the wrap-mode wrapper box-sizing pinning. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
- Files reviewed: 2/2 changed files
- Comments generated: 0
- Review effort level: Lite
TylerJDev
added
the
Canary Release
|
Integration test results from github/github-ui PR:
All checks passed! |
Closes #
Adds
box-sizing: border-box !importantto the underline tabbed interface wrapper's wrap-mode rule, matching the!importantalready applied toborder-blockandpadding-blockin the same rule.While investigating the border override issue fixed for the [github-ui] more-menu overflow bug, we noticed
box-sizingin this same rule wasn't pinned with!important. An externalbox-sizing: content-boxoverride could still change the wrapper's effective height budget used for overflow detection (viaIntersectionObserver), incorrectly triggering the overflow "more" menu the same way the unpinnedborderdid previously.Changelog
Changed
UnderlineNav/UnderlinePanelswrap-mode wrapper CSS now also forcesbox-sizing: border-box !important.Rollout strategy
Testing & Reviewing
No visible/functional change under normal usage. This only guards against an external
box-sizingoverride corrupting the overflow-detection height budget, the same class of bug previously fixed forborder/padding-block.