Layout shifts on icon page - Githubissues

lucide-icons / lucide

Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

https://lucide.dev

ISC License

10.27k stars 466 forks source link

Layout shifts on icon page #2356

Open Jay-Karia opened 1 month ago

Jay-Karia commented 1 month ago

Browser

[X] Chrome/Chromium
[ ] Firefox
[ ] Safari
[ ] Edge
[ ] iOS Safari
[ ] Opera
[ ] Other/not relevant

Operating system

[X] Windows
[ ] Linux
[ ] macOS
[ ] ChromeOS
[ ] iOS
[ ] Android
[ ] Other/not relevant

Description

On the specific icon page, under the code block section. On clicking "Vanilla" tab and "React" tab, the layout tends to shift. This decreases UX

Steps to reproduce

Go to any icon page (say: https://lucide.dev/icons/bug)
Navigate to Code Section
Click on "Vanilla" tab.
Click on "React" tab.

The layout shifts!

Checklist

[X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

eugene4545 commented 4 weeks ago

hello, could I work on this issue. I'm thinking we could add padding to the smaller code snippets or set a minimum height so everything is even across the board.