Update style on inventory check card so as to not overflow the screen.

controllers/merchantData.js

@@ -331,7 +331,6 @@ module.exports = {
 
                 res.locals.owner.save()
                     .then((owner)=>{
-                        console.log("thing");
                         req.session.owner = undefined;
                         req.session.merchant = undefined;
                         req.session.success = "PASSWORD RESET. PLEASE LOG IN AGAIN.";

views/dashboardPage/dashboard.css

@@ -197,7 +197,7 @@ Home Strand
         margin: 10px;
     }
 
-    .card p:first-of-type{
+    .card > p:first-of-type{
         font-size: 14px;
         font-weight: bold;
         text-align: center;
@@ -265,16 +265,21 @@ Home Strand
         display: flex;
         align-items: center;
         margin: 5px 0;
+        max-height: 50px;
     }
 
-        .ingredientCheck p:first-of-type{
+        .inventoryCheckIngredient{
             width: 40%;
             font-weight: 300;
             font-size: 15px;
             margin-right: 25px;
+            text-overflow: ellipsis;
+            white-space: wrap;
+            overflow: hidden;
+            text-align: left;
         }
 
-        .ingredientCheck p:last-of-type{
+        .inventoryCheckUnit{
             width: 20%
         }
 

views/dashboardPage/ejs/strands/home.ejs

@@ -33,7 +33,7 @@
 
     <template id="ingredientCheck">
         <li class="ingredientCheck flexRow">
-            <p></p>
+            <p class="inventoryCheckIngredient"></p>
 
             <div class="numberInput">
                 <button>-</button>
@@ -41,7 +41,7 @@
                 <button>+</button>
             </div>
             
-            <p></p>
+            <p class="inventoryCheckUnit"></p>
         </li>
     </template>
 </div>