Giters

TheOdinProject / theodinproject

Main Website for The Odin Project

Home Page:http://www.theodinproject.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug: Layout shift when closing modals on small screens

KevinMulhern opened this issue · comments

commented

Checks

  • I have thoroughly read and understand The Odin Project Contributing Guide
  • The title of this issue follows the Bug: brief description of bug format, e.g. Bug: Lesson complete button does not update on click
  • Would you like to work on this issue?

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:

Screen.Recording.2024-04-07.at.19.28.39.mov

How to reproduce

  1. Sign in
  2. Upload a solution for one of the projects
  3. Visit your dashboard
  4. Open mobile / responsive design view from your dev tools
  5. Click edit on the solution you uploaded
  6. Close the modal
  7. 💥 the layout shifts

Expected behavior

  1. Sign in
  2. Upload a solution for one of the projects
  3. Visit your dashboard
  4. Open mobile / responsive design view from your dev tools
  5. Click edit on the solution you uploaded
  6. Close the modal
  7. The layout does not shift

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 to sm:p-4 might fix it.

commented

May I be assigned.