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

docs: update positioning examples to work with page resize #33904

Merged
merged 2 commits into from
Feb 26, 2025

Conversation

smhigley
Copy link
Contributor

Previous Behavior

The cover & shorthand examples on the positioning docs page were clipped when the page zoomed/resized down at all:

screenshot of the docs page showing only three of the positioning buttons

While this could theoretically be solved by just adding a scroll overflow without changing the layout at all, the issue is that the current layout doesn't even fit within storybook at full size. So adding a scroll overflow style makes it scroll-overflow all the time, looking rather odd:

screenshot of the same page at full screen, with the button grid aligned to the right side of the story, and also with the right-most buttons clipped at the edge of the story

(the left margin of the story is necessary to ensure the popup has enough space to render at smaller sizes)

New Behavior

I updated the grid layout to be a more compact grid so it would fit within the story at full width, and also be able to scroll-overflow at smaller screens:
screenshot of the same button grid, but as a 3 by 5 grid instead of 5 by 5, with the instructions outside and above the grid

screenshot of the same UI at a mobile width, and only the last line of right-most buttons is visible and scrolled into view

Related Issue(s)

@smhigley smhigley requested review from a team as code owners February 26, 2025 00:01
Copy link

github-actions bot commented Feb 26, 2025

📊 Bundle size report

✅ No changes found

Copy link

Pull request demo site: URL

Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

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

nice ty @smhigley !

@smhigley smhigley merged commit a73ae88 into microsoft:master Feb 26, 2025
11 checks passed
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.

2 participants