Llastflowers/5118/select panel unhide footer

[llastflowers]

Closes https://github.com/github/primer/issues/5118

Changelog

New

• Detect mobile keyboard visibility by detecting viewport size changes when keyboard appears
• Calculate keyboard height with original viewport height - reduced viewport height when the keyboard is visible
• Adjust panel height based on keyboard height to keep footer above keyboard and always visible

(This approach made more sense to me vs. trying to reposition the footer itself to stick to the keyboard, because it seemed a lot simpler to implement, generally less issue-prone, easier to understand the code, required fewer changes, seems more likely to work across different browsers and devices, and the UI interactions are basically exactly the same, if not a bit cleaner. That said, I'm open to feedback ofc!)

Changed

Panel now automatically resizes when mobile keyboard is visible so that content including the footer is not hidden behind the keyboard.

Safari on iOS:

          

Chrome on iOS:

          

Removed

Removed one line from the corresponding CSS module that I noticed was making the footer button slightly off-center. If this was intentional lmk and I can revert

     

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

• Test in Storybook on mobile with the following feature flags enabled (or maybe just try this link?), and tap "Open canvas in new tab" so that Storybook UI doesn't interfere with the functionality

• @tylerjdev offered to test on his Android mobile phone for good measure (ty!)
• Please let me know if the repositioning movement of the footer when the keyboard opens appears too abrupt/messy in testing. I can probably add a delay or transition to make it look a bit smoother if needed 😅

References

https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport

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: daba652

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]

👋 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	94.75 KB (+0.26% 🔺)
packages/react/dist/browser.umd.js	94.91 KB (+0.13% 🔺)

[primer-integration]

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

[primer-integration]

🟢 golden-jobs completed with status success.

[francinelucca]

🧑‍🍳💋

[TylerJDev]

Looks good! Nice work ✨

Left one comment, but non-blocking!

[TylerJDev]

LGTM! ✨

[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!