Truncate data when it is too long for the screen

views/inventoryPage/addIngredient.js

@@ -29,6 +29,7 @@ let addIngredientObj = {
             })
             .catch((err)=>{
                 banner.createError("Error: Could not retrieve ingredients");
+                inventoryObj.display();
             });
     },
 

views/inventoryPage/inventory.js

@@ -26,6 +26,7 @@ let inventoryObj = {
 
             let name = document.createElement("td");
             name.innerText = item.name;
+            name.classList = "truncateLong";
             row.appendChild(name);
 
             let category = document.createElement("td");

views/merchantSetupPage/addIngredients.js

@@ -28,6 +28,7 @@ addIngredientsObj = {
             
             let name = document.createElement("td");
             name.innerText = ingredient.name;
+            name.classList = "truncateLong";
             row.appendChild(name);
         
             let category = document.createElement("td");

views/recipesPage/recipes.css

@@ -51,7 +51,6 @@ span{
 /* singleRecipeStrand */
 #singleRecipeStrand{
     display: none;
-    /* width: 50%; */
     flex-direction: column;
     margin: auto;
     align-items: center;
@@ -79,4 +78,8 @@ span{
     #singleRecipeStrand .buttonsDiv{
         font-size: 15px;
     }
+
+    #singleRecipeStrand input{
+        max-width: 100px;
+    }
 }

views/recipesPage/singleRecipe.js

@@ -18,6 +18,7 @@ let singleRecipeObj = {
 
             let name = document.createElement("td");
             name.innerText = ingredient.ingredient.name;
+            name.classList = "truncateLong";
             row.appendChild(name);
 
             let quantity = document.createElement("td");
@@ -51,6 +52,7 @@ let singleRecipeObj = {
         row.appendChild(nameTd);
 
         let name = document.createElement("select");
+        name.classList = "truncateLong";
         nameTd.appendChild(name);
 
         for(let item of merchant.inventory){

views/shared/shared.css

@@ -167,4 +167,11 @@ form{
     .button{
         font-size: 15px;
     }
+
+    .truncateLong{
+        max-width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }