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: content shifting when the copy button appears #235

Merged
merged 1 commit into from
May 1, 2024

Conversation

DarthGigi
Copy link
Contributor

@DarthGigi DarthGigi commented May 1, 2024

I noticed that when any framework is selected the "Share" button appears. Since that button has a padding of py-1.5 and the GitHub button has a padding of py-1, it is slightly larger than the GitHub button which is causing the Header/nav to expand in height by a few pixels; causing a layout shift:

Screenshot.2024-05-01.at.5.46.36.mp4

Just changing the share button's padding to py-1 fixes the shifting, however, in my opinion it looks a bit off next to the GitHub button:
Screenshot 2024-05-01 at 6  05 05@2x

Because as you can see, the share button is slightly smaller than the GitHub button since it doesn't have a border:
Screenshot 2024-05-01 at 6  13 14@2x

So I've changed the styling to include a border and also match the framework buttons, hopefully that's ok:
Screenshot 2024-05-01 at 6  14 40@2x

As you can see, the shifting is gone after these changes:

Screenshot.2024-05-01.at.6.21.39.mp4

@matschik matschik merged commit 32a5817 into matschik:main May 1, 2024
1 check passed
@matschik
Copy link
Owner

matschik commented May 1, 2024

Amazing ! Thanks a lot for the before/after videos and your complete explanations.
Let's merge !

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.

None yet

2 participants