Fix: Modal Layout Shift (#4487)

<!-- 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

app/javascript/controllers/modal_controller.js

@@ -30,10 +30,10 @@ export default class ModalController extends Controller {
   }
 
   lockScroll() {
-    document.body.classList.add('overflow-hidden', 'pr-4');
+    document.body.classList.add('overflow-hidden', 'sm:p-4');
   }
 
   unlockScroll() {
-    document.body.classList.remove('overflow-hidden', 'pr-4');
+    document.body.classList.remove('overflow-hidden', 'sm:p-4');
   }
 }