Merge pull request #287 from AndreWohnsland/dev

Prevent page from scrolling on modals

Author: AndreWohnsland

web_client/src/components/bottle/BottleComponent.tsx

@@ -133,7 +133,13 @@ const BottleComponent: React.FC<BottleProps> = ({
         </div>
         <ProgressBar fillPercent={fillPercent} onClick={openModal} className='col-span-2 sm:col-span-1 max-h-20' />
       </div>
-      <Modal isOpen={isModalOpen} onRequestClose={closeModal} className='modal slim' overlayClassName='overlay z-20'>
+      <Modal
+        isOpen={isModalOpen}
+        onRequestClose={closeModal}
+        className='modal slim'
+        overlayClassName='overlay z-20'
+        preventScroll={true}
+      >
         <div className='rounded w-full h-full flex flex-col'>
           <div className='pl-2 flex justify-between items-center mb-2'>
             <h2 className='text-xl font-bold text-secondary'>{selectedIngredient?.name || 'Ingredient'}</h2>

web_client/src/components/cocktail/CocktailList.tsx

@@ -96,7 +96,7 @@ const CocktailList: React.FC = () => {
           <CocktailSelection selectedCocktail={selectedCocktail} handleCloseModal={handleCloseModal} />
         )}
       </Modal>
-      <Modal isOpen={singleIngredientOpen} className='modal slim' overlayClassName='overlay z-20'>
+      <Modal isOpen={singleIngredientOpen} className='modal slim' overlayClassName='overlay z-20' preventScroll={true}>
         <SingleIngredientSelection onClose={() => setSingleIngredientOpen(false)} />
       </Modal>
     </div>

web_client/src/components/cocktail/ProgressModal.tsx

@@ -73,6 +73,7 @@ const ProgressModal: React.FC<ProgressModalProps> = ({
       className='modal'
       overlayClassName='overlay z-30'
       shouldCloseOnOverlayClick={false}
+      preventScroll={true}
     >
       <div className='progress-modal h-full flex flex-col justify-between'>
         <h2 className='text-4xl font-bold mb-8 text-center text-secondary'>{displayName}</h2>

web_client/src/components/cocktail/RefillPrompt.tsx

@@ -31,7 +31,7 @@ const RefillPrompt: React.FC<RefillPromptProps> = ({ isOpen, message, bottleNumb
   };
 
   return (
-    <Modal isOpen={isOpen} className='modal slim' overlayClassName='overlay z-30'>
+    <Modal isOpen={isOpen} className='modal slim' overlayClassName='overlay z-30' preventScroll={true}>
       <div className='flex flex-col items-center justify-center w-full h-full'>
         <div className='flex justify-between w-full mb-2'>
           <button

web_client/src/index.css

@@ -216,4 +216,13 @@ input[type='time']::-webkit-calendar-picker-indicator {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.75);
+  overflow: hidden;
+}
+
+/* Class added to body when modal is open */
+.ReactModal__Body--open {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
 }