Make questionnaire Ui reusable

src/components/Modal/index.svelte

@@ -1,9 +1,19 @@
 <script>
+  import { afterUpdate } from 'svelte';
   import CloseButton from '../Buttons/Close/index.svelte';
 
   export let open;
   export let onClose;
   export let modalHeading;
+  export let width;
+
+  afterUpdate(() => {
+    if (open) {
+      document.getElementsByTagName('body')[0].style.overflow = 'hidden';
+    } else {
+      document.getElementsByTagName('body')[0].style.overflow = 'auto';
+    }
+  });
 </script>
 
 {#if open}
@@ -11,7 +21,7 @@
     class="dialog fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 bg-gray-100 bg-opacity-50"
   >
     <div aria-hidden="true" class="backdrop" />
-    <div class="bg-white mx-auto w-3xl shadow-lg p-5 pt-2 rounded-md">
+    <div class="bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md">
       <div class="flex items-center justify-between mb-4">
         <h3 class="text-xl m-0">
           {modalHeading}
@@ -19,7 +29,9 @@
         <CloseButton onClick={onClose} contained={true} />
       </div>
 
-      <slot />
+      <div class="body h-4/5 overflow-y-auto">
+        <slot />
+      </div>
     </div>
   </div>
 {/if}
@@ -28,4 +40,7 @@
   .dialog {
     background-color: rgba(0, 0, 0, 0.5);
   }
+  .body {
+    max-height: 60vh;
+  }
 </style>