search

quran / quran.com-frontend-next

Frontend build on next.js
https://quran.com
1.31k stars 381 forks source link

Fixing the layout shift that happens in the home page and chapterId page #2130

Open 0XYoussefX0 opened 3 months ago

0XYoussefX0 commented 3 months ago

Summary

fixed the layout shift that happens when you open the language dropdown, and when you open any of the drawers available on the navbar. the first one is caused by a library used by radix ui under the hood called: react-remove-scroll, and the second one is caused by the usePreventBodyScrolling hook.

Here is the Before and After

vercel[bot] commented 3 months ago

@0XYoussefX0 is attempting to deploy a commit to the Quran Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 3 months ago

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

Name Status Preview Comments Updated (UTC)
quran-com ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 23, 2024 1:12pm
0XYoussefX0 commented 1 month ago

@osamasayed @AhmedCodeGuy please can you review this PR ? it builds perfectly fine and solves a layout shift issue that will improve the UX for users visiting from a computer.

0XYoussefX0 commented 1 month ago

@AhmedCodeGuy Done 👍