Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Layout shift when closing modals on small screens #4481

Closed
2 of 3 tasks
KevinMulhern opened this issue Apr 7, 2024 · 1 comment
Closed
2 of 3 tasks

Bug: Layout shift when closing modals on small screens #4481

KevinMulhern opened this issue Apr 7, 2024 · 1 comment
Assignees
@BryanF1nes
Labels
Status: In Progress This issue/PR has ongoing work being done Type: Bug Involves something that isn't working as intended

Comments

@KevinMulhern
Copy link
Member

KevinMulhern commented Apr 7, 2024 •
edited
Loading

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.
@KevinMulhern KevinMulhern added Type: Bug Involves something that isn't working as intended Status: Needs Review This issue/PR needs an initial or additional review labels Apr 7, 2024
@github-project-automation github-project-automation bot moved this to 📋 Backlog / Ideas in Main Site Apr 7, 2024
@KevinMulhern KevinMulhern added the Status: On Hold There is a temporary hold on any continued work or review label Apr 7, 2024
@BryanF1nes
Copy link
Member

May I be assigned.

@KevinMulhern KevinMulhern added Status: In Progress This issue/PR has ongoing work being done and removed Status: On Hold There is a temporary hold on any continued work or review Status: Needs Review This issue/PR needs an initial or additional review labels Apr 8, 2024
@BryanF1nes BryanF1nes mentioned this issue Apr 8, 2024
Merged
7 tasks
KevinMulhern pushed a commit that referenced this issue Apr 9, 2024
@BryanF1nes
Fix: Modal Layout Shift (#4487)
d6fb4bb 
<!-- Thank you for taking the time to contribute to The Odin Project. In
order to get this pull request (PR) merged in a reasonable amount of
time, you must complete this entire template. -->

## Because
<!-- Summarize the purpose or reasons for this PR, e.g. what problem it
solves or what benefit it provides. -->
Fixes layout shift that occurs when opening a modal.

## This PR
<!-- A bullet point list of one or more items describing the specific
changes. -->
- Fixes layout shift that occurs specifically on mobile devices when
opening a modal by updating `pr-4` to `sm: p-4`

## Issue
<!--
If this PR closes an open issue in this repo, replace the XXXXX below
with the issue number, e.g. Closes #2013.

If this PR closes an open issue in another TOP repo, replace the #XXXXX
with the URL of the issue, e.g. Closes
https://github.com/TheOdinProject/curriculum/issues/XXXXX

If this PR does not close, but is related to another issue or PR, you
can link it as above without the 'Closes' keyword, e.g. 'Related to
#2013'.
-->
This PR Closes
[#4481]("#4481")

## Additional Information
<!-- Any other information about this PR, such as a link to a Discord
discussion. -->


https://github.com/TheOdinProject/theodinproject/assets/49371751/00c63ea5-8109-401b-a828-beb9b40298e6

## Pull Request Requirements
<!-- Replace the whitespace between the square brackets with an 'x',
e.g. [x]. After you create the PR, they will become checkboxes that you
can click on. -->
- [x] I have thoroughly read and understand [The Odin Project
Contributing
Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md)
- [x] The title of this PR follows the `keyword: brief description of
change` format, using one of the following keywords:
    - `Feature` - adds new or amends existing user-facing behavior
- `Chore` - changes that have no user-facing value, refactors,
dependency bumps, etc
    - `Fix` - bug fixes
-   [x] The `Because` section summarizes the reason for this PR
- [x] The `This PR` section has a bullet point list describing the
changes in this PR
- [x] I have verified all tests and linters pass after making these
changes.
- [x] If this PR addresses an open issue, it is linked in the `Issue`
section
-   [ ] If applicable, this PR includes new or updated automated tests
@github-project-automation github-project-automation bot moved this from 📋 Backlog / Ideas to ✅ Done in Main Site Apr 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@BryanF1nes BryanF1nes

Labels
Status: In Progress This issue/PR has ongoing work being done Type: Bug Involves something that isn't working as intended
Projects
Main Site
Archived in project
Milestone
No milestone
Development

No branches or pull requests
2 participants
@KevinMulhern @BryanF1nes