fix: content shifting when the copy button appears #235
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 ofpy-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:Because as you can see, the share button is slightly smaller than the GitHub button since it doesn't have a border:
So I've changed the styling to include a border and also match the framework buttons, hopefully that's ok:
As you can see, the shifting is gone after these changes:
Screenshot.2024-05-01.at.6.21.39.mp4