Overlay: Add min-width to Overlay container

[TylerJDev]

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

Adds a prop that enables "reflow", making the Overlay responsive when the screen width reaches a breakpoint of 320px.

Example: Memex Nested Overlays Story

Draft note: The prop is added so that this doesn't affect implementations that utilize Overlay such as ActionMenu and others.

Example video

Screen.Recording.2024-10-28.at.2.34.39.PM.mov

Video description: Video showcases the responsiveness of the "Memex Nested Overlays" story. I adjust the width of the viewport to demonstrate the reflow behavior of the Overlay component.

Changelog

Changed

• Adds min-width to Overlay container

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]

🦋 Changeset detected

Latest commit: 2f7a92c

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	Minor

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	97.75 KB (+0.09% 🔺)
packages/react/dist/browser.umd.js	98.05 KB (+0.04% 🔺)

[primer-integration]

🟢 golden-jobs completed with status success.

[francinelucca]

I'm confused about this logic, wouldn't the second part be overriding the FF? or is that the intent here?

[TylerJDev]

For this, I was thinking of adding the prop outside of the FF, but putting the opt-out factor inside the feature flag. So basically someone could use the prop today, but they'd have to pass it themselves.

if overflow is true, that means that the FF is enabled and a consumer would have to opt-out of it via preventOverflow=true. Otherwise, if the FF is not enabled, they must pass in preventOverflow="false" in order to get the reflow style.

[francinelucca]

ahh I see, thanks for explaining that!

[francinelucca]

🚀