Fix modal-import (#7278)

Author: dem4ron

app/css/bootcamp/components/modal.css

@@ -23,7 +23,3 @@
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
     outline: none;
 }
-
-body:has(.solve-exercise-page-react-modal-overlay) {
-    overflow: hidden;
-}

app/css/packs/bootcamp-ui.css

@@ -18,6 +18,7 @@
 @import "../bootcamp/components/toggle-switch";
 @import "../bootcamp/components/test-buttons";
 @import "../bootcamp/components/scenario";
+@import "../bootcamp/components/modal";
 
 @import "../bootcamp/components/project-widget";
 @import "../bootcamp/components/exercise-widget";

app/javascript/components/bootcamp/SolveExercisePage/Header/ResetButton.tsx

@@ -3,6 +3,7 @@ import Modal from 'react-modal'
 import { assembleClassNames } from '@/utils/assemble-classnames'
 import { SolveExercisePageContext } from '../SolveExercisePageContextWrapper'
 
+Modal.setAppElement('body')
 export function ResetButton() {
   const [shouldOpenConfirmationModal, setShouldOpenConfirmationModal] =
     useState(false)
@@ -24,6 +25,7 @@ export function ResetButton() {
 
       {/* @ts-ignore */}
       <Modal
+        ariaHideApp={false}
         isOpen={shouldOpenConfirmationModal}
         className="solve-exercise-page-react-modal-content flex flex-col items-center justify-center text-center max-w-[500px]"
         overlayClassName="solve-exercise-page-react-modal-overlay"