Closed KevinMulhern closed 3 months ago
Bug: brief description of bug
Bug: Lesson complete button does not update on click
When opening modals, we lock scrolling on the screen and hide the scrollbar.
This works fine on larger screens. But the scroll bar is already hidden on mobiles (unless you are actively scrolling).
This is creating a layout shift when a modal is closed, demonstrated in this video:
https://github.com/TheOdinProject/theodinproject/assets/7963776/e28164a4-4b52-42b6-97eb-d3b81a78de0f
Chrome
MacOS
@KM
We hide the the scrollbar by applying a Tailwind p-4 utility class to the document body here:
p-4
This likely only needs to be applied to screens above Tailwinds sm breakpoint. So changing to sm:p-4 might fix it.
sm
sm:p-4
May I be assigned.
Checks
Bug: brief description of bug
format, e.g.Bug: Lesson complete button does not update on click
Bug description
When opening modals, we lock scrolling on the screen and hide the scrollbar.
This works fine on larger screens. But the scroll bar is already hidden on mobiles (unless you are actively scrolling).
This is creating a layout shift when a modal is closed, demonstrated in this video:
https://github.com/TheOdinProject/theodinproject/assets/7963776/e28164a4-4b52-42b6-97eb-d3b81a78de0f
How to reproduce
Expected behavior
What browsers are you seeing the problem on?
Chrome
What OS are you using?
MacOS
Discord Name
@KM
Additional Comments
We hide the the scrollbar by applying a Tailwind
p-4
utility class to the document body here:This likely only needs to be applied to screens above Tailwinds
sm
breakpoint. So changing tosm:p-4
might fix it.