Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(PageLayout): add maxWidth to container #2502

Merged
merged 4 commits into from
Oct 31, 2022

Conversation

joshblack
Copy link
Member

This PR updates the container used to wrap PageLayout.Pane and PageLayout.Content to match their previous parent element which set max-width: 100%.

Without this property, the PageLayout.Content pane would extend passed the edge of the page and trigger overflow. This lead to issues as described here where the position: sticky was triggered due to the overflow.

To reproduce this issue, you can visit the reivew lab from that Slack thread and reduce the size of the browser to where the symbol pane overlaps the code area. Adding in max-width: 100% to the container of the main and Pane addresses the issue.

@joshblack joshblack requested review from a team and JoshBowdenConcepts October 31, 2022 17:47
@changeset-bot
Copy link

changeset-bot bot commented Oct 31, 2022

🦋 Changeset detected

Latest commit: 45e0a79

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
Copy link
Contributor

github-actions bot commented Oct 31, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 78.14 KB (+0.01% 🔺)
dist/browser.umd.js 78.79 KB (+0.01% 🔺)

@joshblack joshblack temporarily deployed to github-pages October 31, 2022 17:57 Inactive
@joshblack joshblack temporarily deployed to github-pages October 31, 2022 18:23 Inactive
Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢

@joshblack joshblack enabled auto-merge (squash) October 31, 2022 18:47
@joshblack joshblack temporarily deployed to github-pages October 31, 2022 18:53 Inactive
@joshblack joshblack merged commit 6199b10 into main Oct 31, 2022
@joshblack joshblack deleted the fix/update-page-layout-container branch October 31, 2022 18:55
@primer-css primer-css mentioned this pull request Oct 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants