Fix SelectPanel close button alignment in narrow viewports

[liuliu-dev]

Closes #5446

---

🐛 Problem

When primer_react_select_panel_fullscreen_on_narrow feature flag is enabled, the close button (X) rendered by AnchoredOverlay is misaligned with the SelectPanel header text in narrow viewports. The close button (32px tall, centered) doesn't align with the h1 header text (21px line-height, flex-start aligned).

Added CSS rule to adjust the title margin for anchored variant SelectPanels in narrow viewports, following the same pattern used by the modal variant:

.Wrapper[data-variant='anchored'] .Title {
  @media screen and (--viewportRange-narrow) {
    margin-top: var(--base-size-8);
  }
}

Before	After

🔮 Future Work

This is a temporary fix for the dual close buttons. After primer_react_select_panel_fullscreen_on_narrow feature flag is removed, we should:

1. Consolidate to a single close button (currently we have 2 options: close button in AnchoredOverlay or close button in SelectPanel wrapper)
2. Remove this CSS workaround

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

• Verify alignment in Storybook with primer_react_select_panel_fullscreen_on_narrow enabled.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: d764b63

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[Copilot]

Pull Request Overview

This PR fixes a visual alignment issue in the SelectPanel component where the close button rendered by AnchoredOverlay was not properly aligned with the header text in narrow viewports when the primer_react_select_panel_fullscreen_on_narrow feature flag is enabled.

• Adds CSS rule to position the close button with proper top offset in narrow viewports
• Updates Storybook example to include subtitle for better testing coverage
• Includes temporary workaround documentation with TODO for future cleanup

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/react/src/SelectPanel/SelectPanel.module.css	Adds CSS rule to align close button positioning in narrow viewports for anchor variant
packages/react/src/SelectPanel/SelectPanel.features.stories.tsx	Adds subtitle to Storybook example for testing the alignment fix
.changeset/silver-melons-relate.md	Documents the change as a major version bump

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	91.9 KB (0%)
packages/react/dist/browser.umd.js	92.23 KB (0%)

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/391382

[primer-integration]

🟢 golden-jobs completed with status success.

[pksjce]

Hi 👋
Why can't we directly do the future work now instead of the workaround?

[liuliu-dev]

Hi 👋 Why can't we directly do the future work now instead of the workaround?

@pksjce Good question! We currently have two close button implementations:

1. SelectPanel's own IconButton (modal variant on wide screens)
2. AnchoredOverlay's built-in close button (anchored variant on narrow screens when feature flag is enabled)

We could consolidate these now, but it's safer to wait until the primer_react_select_panel_fullscreen_on_narrow feature flag is removed since people are still using it. Changing the close button architecture while the flag is active could potentially break things for existing users.

This fix just addresses the alignment issue with the AnchoredOverlay button for now. The feature flags removal is planned for a few weeks from now, once the flag is removed, we can pick one approach and clean this up properly.

[pksjce]

Great! Would be nice to have a tracking ticket where you can put in this context and pick it back up when everything is ready?

[pksjce]

I was able to test it and moving the title element with margin seems to fix the issue. 👍