Fix overlapping issue in TabNav at narrow viewports

[liuliu-dev]

What are you trying to accomplish?

Fixes an accessibility issue where tab navigation items overlapped at narrow viewport widths (320×256px), failing WCAG 1.4.10 Reflow requirements.

Updated .tabnav-tabs CSS to enable horizontal scrolling instead of hiding overflow, added flex-shrink: 0 to child <li> elements to prevent them from collapsing

Screenshots

Before	After

Integration

List the issues that this change affects.

Related issue: https://github.com/github/accessibility-audits/issues/14743

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Anything you want to highlight for special attention from reviewers?

Accessibility

• Fixes axe scan violation - This change fixes an existing axe scan violation.
• No new axe scan violation - This change does not introduce any new axe scan violations.
• New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: f1e5efa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

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]

Uh oh! @liuliu-dev, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 13
• Images should have meaningful alternative text (alt text) at line 13
• Images should have meaningful alternative text (alt text) at line 13
• Images should have meaningful alternative text (alt text) at line 13

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.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[Copilot]

Pull request overview

This PR fixes an accessibility violation where tab navigation items overlapped at narrow viewport widths (320×256px), failing to meet WCAG 1.4.10 Reflow requirements.

Changes:

• Updated .tabnav-tabs CSS to enable horizontal scrolling instead of hiding overflow
• Added flex-shrink: 0 to child <li> elements to prevent tab collapse at narrow viewports

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
app/components/primer/alpha/tab_nav.pcss	Modified CSS to enable horizontal scrolling and prevent tab item shrinking at narrow viewports
.changeset/mighty-toys-remain.md	Added changeset documenting the patch-level fix for TabNav overlapping issue

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.