fix(SelectPanel): update input fontSize to 16 on small viewports on iOS #6139

francinelucca · 2025-05-29T18:44:55Z

Relates to https://github.com/github/primer/issues/5118

iPhones force the screen to zoom in to input when the text is under 16px font size. This PR adds a css media query to make the input font size 16px on narrow screens when on full screen to prevent zoom in on SelectPanel.

Changelog

New

css media query to make input font size 16px on narrow screens when on full screen

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

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 · 2025-05-29T18:44:59Z

🦋 Changeset detected

Latest commit: 5dc4c8f

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

github-actions · 2025-05-29T18:45:22Z

👋 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 · 2025-05-29T18:48:11Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	94.49 KB (+0.04% 🔺)
packages/react/dist/browser.umd.js	94.6 KB (+0.13% 🔺)

Copilot

Pull Request Overview

This patch ensures input elements in SelectPanel use a 16px font size on narrow viewports to prevent iOS from zooming in when text is smaller than 16px.

Introduces a fullScreenOnNarrow prop passed through SelectPanel to the filtered list.
Extends FilteredActionListWithModernActionList to accept and act on fullScreenOnNarrow.
Adds a CSS rule to bump the input’s font size on narrow screens.
Updates the changeset for a patch release.

Reviewed Changes

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

File	Description
packages/react/src/SelectPanel/SelectPanel.tsx	Pass `fullScreenOnNarrow` flag into the list-rendering logic
packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx	Add `fullScreenOnNarrow` prop and conditionally apply the CSS class
packages/react/src/FilteredActionList/FilteredActionList.module.css	Define `.FullScreenTextInput` with a media query for narrow viewports
.changeset/mean-parrots-heal.md	Record the patch release and summarise the fix

Comments suppressed due to low confidence (1)

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx:46

The new fullScreenOnNarrow prop introduces visual behavior changes but is not covered by existing tests. Please add unit or Visual Regression tests to confirm the font-size adjustment on narrow viewports.

fullScreenOnNarrow?: boolean

Copilot · 2025-05-29T19:10:28Z

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -224,6 +226,7 @@ export function FilteredActionList({
          aria-describedby={inputDescriptionTextId}
          loaderPosition={'leading'}
          loading={loading && !loadingType.appearsInBody}
+          className={fullScreenOnNarrow ? classes.FullScreenTextInput : ''}


This direct className assignment will override any className provided in textInputProps, potentially dropping existing styling. Consider merging them, for example using clsx(textInputProps.className, fullScreenOnNarrow && classes.FullScreenTextInput).

… fix/selectpanel-zoomin

langermank · 2025-05-29T23:13:34Z

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -4,3 +4,12 @@
  overflow: auto;
  flex-grow: 1;
 }
+
+.FullScreenTextInput {


Just curious, do you need a classname at all since you're gating the change inside a media query?

I'm using it on js side to only apply it when the SelectPanel is fullscreen so I think yes 👀 . Unless we'd like to always do this? which is fair

Ahh okay, I wasn't sure if we always wanted to do it for any ios situation 😄

primer-integration · 2025-05-30T04:14:51Z

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

primer-integration · 2025-05-30T04:41:55Z

🟢 golden-jobs completed with status success.

francinelucca added 2 commits May 29, 2025 14:43

fix(SelectPanel): update input fontSize to 16 on small viewports

8cf71f9

add end of line

e7e1f76

github-actions bot added the staff Author is a staff member label May 29, 2025

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 29, 2025

francinelucca added the update snapshots label May 29, 2025

francinelucca deployed to github-pages May 29, 2025 18:59 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6139 May 29, 2025 18:59 Inactive

francinelucca requested a review from langermank May 29, 2025 19:02

test(vrt): update snapshots

4b30f7a

github-actions bot removed the update snapshots label May 29, 2025

Create mean-parrots-heal.md

67849c1

francinelucca marked this pull request as ready for review May 29, 2025 19:09

Copilot AI review requested due to automatic review settings May 29, 2025 19:09

francinelucca requested review from a team as code owners May 29, 2025 19:09

francinelucca requested a review from maximedegreve May 29, 2025 19:09

Copilot AI reviewed May 29, 2025

View reviewed changes

github-actions bot requested a deployment to storybook-preview-6139 May 29, 2025 19:11 Abandoned

francinelucca deployed to github-pages May 29, 2025 19:25 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6139 May 29, 2025 19:25 Inactive

francinelucca added 2 commits May 29, 2025 16:22

target iPhone only

a6fdd5b

Merge branch 'fix/selectpanel-zoomin' of github.com:primer/react into…

c338121

… fix/selectpanel-zoomin

francinelucca added the update snapshots label May 29, 2025

francinelucca deployed to github-pages May 29, 2025 20:35 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6139 May 29, 2025 20:36 Inactive

test(vrt): update snapshots

c3f7be0

github-actions bot removed the update snapshots label May 29, 2025

primer bot deployed to github-pages May 29, 2025 20:56 View deployment

github-actions bot temporarily deployed to storybook-preview-6139 May 29, 2025 20:56 Inactive

langermank reviewed May 29, 2025

View reviewed changes

langermank approved these changes May 30, 2025

View reviewed changes

francinelucca and others added 2 commits May 29, 2025 23:43

merge classNames

1d0daad

Merge branch 'main' into fix/selectpanel-zoomin

90454c8

github-actions bot requested a deployment to storybook-preview-6139 May 30, 2025 03:46 Abandoned

lint fix

255f5f7

francinelucca changed the title ~~fix(SelectPanel): update input fontSize to 16 on small viewports~~ fix(SelectPanel): update input fontSize to 16 on small viewports on iOS May 30, 2025

Update mean-parrots-heal.md

5dc4c8f

github-actions bot requested a deployment to storybook-preview-6139 May 30, 2025 03:56 Abandoned

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 30, 2025

francinelucca deployed to github-pages May 30, 2025 04:09 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6139 May 30, 2025 04:10 View deployment

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels May 30, 2025

francinelucca added this pull request to the merge queue May 30, 2025

Merged via the queue into main with commit 091165f May 30, 2025
35 checks passed

francinelucca deleted the fix/selectpanel-zoomin branch May 30, 2025 11:12

primer bot mentioned this pull request May 30, 2025

Release tracking (37.26.0) #6127

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(SelectPanel): update input fontSize to 16 on small viewports on iOS #6139

fix(SelectPanel): update input fontSize to 16 on small viewports on iOS #6139

Uh oh!

francinelucca commented May 29, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented May 29, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 29, 2025

Uh oh!

github-actions bot commented May 29, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI May 29, 2025

Uh oh!

langermank May 29, 2025

Uh oh!

francinelucca May 30, 2025

Uh oh!

langermank May 30, 2025

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

Uh oh!

Uh oh!

fix(SelectPanel): update input fontSize to 16 on small viewports on iOS #6139

fix(SelectPanel): update input fontSize to 16 on small viewports on iOS #6139

Uh oh!

Conversation

francinelucca commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented May 29, 2025

Uh oh!

github-actions bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

langermank May 29, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca May 30, 2025

Choose a reason for hiding this comment

Uh oh!

langermank May 30, 2025

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

Uh oh!

Uh oh!

francinelucca commented May 29, 2025 •

edited

Loading

changeset-bot bot commented May 29, 2025 •

edited

Loading

github-actions bot commented May 29, 2025 •

edited

Loading