diff --git a/.changeset/silver-melons-relate.md b/.changeset/silver-melons-relate.md new file mode 100644 index 00000000000..280d41b608c --- /dev/null +++ b/.changeset/silver-melons-relate.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fix SelectPanel close button alignment in narrow viewports. diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-modern-action-list--true-full-screen-on-narrow--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-modern-action-list--true-full-screen-on-narrow--true-linux.png index ff0525c0196..edf57c75689 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-modern-action-list--true-full-screen-on-narrow--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-modern-action-list--true-full-screen-on-narrow--true-linux.png differ diff --git a/packages/react/src/SelectPanel/SelectPanel.module.css b/packages/react/src/SelectPanel/SelectPanel.module.css index 68bff87d161..6f5dbd7c19c 100644 --- a/packages/react/src/SelectPanel/SelectPanel.module.css +++ b/packages/react/src/SelectPanel/SelectPanel.module.css @@ -30,7 +30,25 @@ } .Wrapper[data-variant='modal'] .Title { - margin-top: var(--base-size-8); /* styling specific to the modal variant */ + margin-top: var(--base-size-8); + /* styling specific to the modal variant */ +} + +/* + * Align SelectPanel header text with AnchoredOverlay close button + * + * Only applies to anchor variant in narrow viewports. When the feature flag + * `primer_react_select_panel_fullscreen_on_narrow` is enabled, we align the + * title with the close button position (similar to modal variant approach). + * + * TODO: Remove this workaround after the feature flag is gone. We should + * pick one way to render the close button instead of having two different + * implementations. + */ +.Wrapper[data-variant='anchored'] .Title { + @media screen and (--viewportRange-narrow) { + margin-top: var(--base-size-8); + } } .Subtitle {