fix(docs): horizontal overflow in preview on mobile devices

[blenderskool]

There is a horizontal overflow in the preview section of some components on mobile screens. This PR fixes it.

I have re-checked all the component previews on desktops and mobile layouts and these changes work the best while retaining the same previews of components as before. The align prop of PreviewComponent also continues to work in the same way.

Comparison of before / after the changes:

mobile-overflow.mov

[changeset-bot]

⚠️ No Changeset found

Latest commit: 35f1b78

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@blenderskool is attempting to deploy a commit to the Lemon Squeezy Team on Vercel.

A member of the Team first needs to authorize it.

[blenderskool]

@brankoconjic @gilbitron Sorry for the ping, but do let me know if any other changes are required here 🙃!

[brankoconjic]

Thanks for the contribution! Looks good!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wedges-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 22, 2023 0:31am