Fix UnderlineNav tab list width in Safari#8164
Conversation
🦋 Changeset detectedLatest commit: 928816d 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
staff
|
There was a problem hiding this comment.
Pull request overview
This PR adjusts the shared internal styling for UnderlineNav/UnderlinePanels to ensure the tab list stretches to the full available width in Safari, and adds a patch changeset to release the fix.
Changes:
- Add
flex-grow: 1to the base.UnderlineItemListrule so the list can expand to fill its flex container. - Remove reliance on the wrap-only variant for list growth by making growth part of the base list styling.
- Add a patch changeset describing the Safari width fix for both
UnderlineNavandUnderlinePanels.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/internal/components/UnderlineTabbedInterface.module.css | Makes the shared underline tab list a growing flex item so it can fill the wrapper width (Safari fix). |
| .changeset/underline-item-list-flex-grow.md | Patch changeset documenting the Safari width fix for the shared underline tab list. |
Review details
- Files reviewed: 2/2 changed files
- Comments generated: 1
- Review effort level: Low
a96461e to
de8a96e
Compare
jonrohan
added
the
integration-tests: skipped manually
|
In Safari the UnderlineNav tab list wasn't stretching to fill the underline nav. Add flex-grow: 1 to the list, scoped to the wrap variant so it only applies to UnderlineNav. Keeping it off the shared base rule leaves UnderlinePanels' icon-visibility measurement untouched.
de8a96e to
928816d
Compare
jonrohan
changed the title
|
Uh oh! @jonrohan, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
jonrohan
added
the
Canary Release
In Safari the
UnderlineNavtab list wasn't stretching to fill the underline nav. The list is a flex child of the wrapper but didn't grow, so it collapsed to its content width. Addingflex-grow: 1to.UnderlineItemListmakes it fill the wrapper.I scoped it to the
data-overflow-mode='wrap'variant so it only applies toUnderlineNav. The base rule is shared withUnderlinePanels, which measures the list's natural width (viaResizeObservercontentRect.width) to decide whether tab icons fit. Growing that measured element would throw off the icons-visible calc, so keepingflex-growoff the base rule leavesUnderlinePanelsuntouched.Changelog
New
Changed
UnderlineNav's tab list now usesflex-grow: 1(scoped to the wrap variant) so it fills the underline nav width in SafariRemoved
Rollout strategy
Testing & Reviewing
Scoped to
UnderlineNav(alwaysdata-overflow-mode='wrap'), soUnderlinePanelsis deliberately unaffected. I confirmedUnderlinePanelsis the only consumer with the icon-visibility measurement, and per primer-query the only product surface using icon tabs isgithub/github-ui's Org Security Campaigns page, which this no longer touches. Worth a quick VRT pass onUnderlineNavto confirm no snapshot shifts.