Bug: Progress badge overlapping modals

[KevinMulhern]

Checks

• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [X] 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

Our progress circle is overlapping modals:

https://github.com/TheOdinProject/theodinproject/assets/7963776/a5344449-f884-4cdb-b15e-5e1896994e94

How to reproduce

1. Sign in
2. Upload a solution for one of the projects
3. Visit the dashboard
4. Reduce the size of your screen until the course title is displayed under the course badge instead of beside it.
5. Click edit on the solution you uploaded
6. 💥 the progress bar is overlapping the modal.

See the video in the bug description.

Expected behavior

1. Sign in
2. Upload a solution for one of the projects
3. Visit the dashboard
4. Reduce the size of your screen until the course title is displayed under the course badge instead of beside it.
5. Click edit on the solution you uploaded
6. The progress bar is hidden behind the modal.

What browsers are you seeing the problem on?

Chrome

What OS are you using?

MacOS

Discord Name

@KM

Additional Comments

This looks to be a simple to fix, z-index issue. The progress circle has a z-index of 30 and the modal has a z-index of 10. Those should be the other way around:

• Give the progress circle component a z-index of 10
• Give the modal a z-index of 30

[BryanF1nes]

May I be assigned.