Fix the style on the sub-ingredients modal.

views/dashboardPage/css/modal.css

@@ -12,6 +12,7 @@
         display: flex;
         flex-direction: column;
         align-items: flex-end;
+        max-height: 90%;
     }
 
         .modalBox > svg{
@@ -19,6 +20,10 @@
             cursor: pointer;
         }
 
+        #modalContent{
+            max-height: 90%;
+        }
+
         .modalSpreadsheetUpload{
             flex-direction: column;
             align-items: center;
@@ -131,17 +136,27 @@
         align-items: center;
         background: white;
         min-width: 500px;
+        max-height: 100%;
     }
 
         #editSubIngredientsContainer{
             display: flex;
             justify-content: space-around;
             width: 100%;
+            height: 100%;
+            overflow-y: auto;
         }
 
+            #editSubIngredientsHeaders{
+                display: flex;
+                justify-content: space-around;
+                width: 100%;
+            }
+
             #editSubAllIng, #editSubCurrentIng{
                 padding: 25px;
                 width: 100%;
+                overflow-y: auto;
             }
 
                 #editSubAllIng > *{

views/dashboardPage/ejs/modal.ejs

@@ -61,6 +61,11 @@
             <div id="modalEditSubIngredients" style="display:none">
                 <h2>EDIT SUB INGREDIENTS</h2>
 
+                <div id="editSubIngredientsHeaders">
+                    <h3>AVAILABLE</h3>
+                    <h3>SUB-INGREDIENTS</h3>
+                </div>
+
                 <div id="editSubIngredientsContainer">
                     <div id="editSubAllIng"></div>
                     <div id="editSubCurrentIng"></div>

views/dashboardPage/js/modal.js

@@ -170,14 +170,6 @@ let modal = {
             right.removeChild(right.firstChild);
         }
 
-        let leftHeader = document.createElement("h3");
-        leftHeader.innerText = "AVAILABLE";
-        left.appendChild(leftHeader);
-
-        let rightHeader = document.createElement("h3");
-        rightHeader.innerText = "SUB INGREDIENTS";
-        right.appendChild(rightHeader);
-
         let addIngredient = (button, ingredient)=>{
             button.parentElement.removeChild(button);
 
@@ -229,7 +221,7 @@ let modal = {
                 ingredients: []
             };
 
-            for(let i = 1; i < right.children.length; i++){
+            for(let i = 0; i < right.children.length; i++){
                 data.ingredients.push({
                     ingredient: right.children[i].ingredient.id,
                     quantity: parseFloat(right.children[i].children[1].children[0].value)