Modal to update sub ingredients now displays all ingredients appropriately.

Fix up the style on the sub ingredients edit modal.

views/dashboardPage/dashboard.css

@@ -812,8 +812,28 @@ Modal
         flex-direction: column;
         align-items: center;
         background: white;
+        min-width: 500px;
     }
 
+        #editSubIngredientsContainer{
+            display: flex;
+            justify-content: space-around;
+            width: 100%;
+        }
+
+            #editSubAllIng, #editSubCurrentIng{
+                padding: 25px;
+                width: 100%;
+            }
+
+                #editSubAllIng > *{
+                    width: 100%;
+                }
+
+                #editSubCurrentIng > * {
+                    width: 100%;
+                }
+
 @media screen and (orientation: portrait){
     @media screen and (max-width: 1400px){
         body{

views/dashboardPage/ejs/modal.ejs

@@ -59,11 +59,10 @@
             </div>
 
             <div id="modalEditSubIngredients" style="display:none">
-                <h2>Edit Sub Ingredients</h2>
+                <h2>EDIT SUB INGREDIENTS</h2>
 
                 <div id="editSubIngredientsContainer">
                     <div id="editSubAllIng"></div>
-                    <div id="verticalBorder"></div>
                     <div id="editSubCurrentIng"></div>
                 </div>
 

views/dashboardPage/js/modal.js

@@ -158,12 +158,29 @@ let modal = {
         let right = document.getElementById("editSubCurrentIng");
         let template = document.getElementById("selectedSubIngredient").content.children[0];
 
+        while(left.children.length > 0){
+            left.removeChild(left.firstChid);
+        }
+
+        while(right.children.length > 0){
+            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);
+
         for(let i = 0; i < merchant.ingredients.length; i++){
             let skip = false;
             for(let j = 0; j < ingredient.subIngredients.length; j++){
                 if(merchant.ingredients[i].ingredient === ingredient.subIngredients[j].ingredient){
                     let div = template.cloneNode(true);
                     div.children[0].children[0].innerText = merchant.ingredients[i].ingredient.name;
+                    div.children[1].value = ingredient.subIngredients[j].quantity;
                     right.appendChild(div);
                     skip = true;
                     break;