Update static/script.js

static/script.js

@@ -132,26 +132,46 @@ function displayCustomizationIngredients(ingredients) {
         ingredientsList.innerHTML = ''; // Clear previous list
     }
 
-    // Apply styles to the ingredients list for horizontal scrolling
+    // Apply styles directly within the script for layout
     ingredientsList.style.display = 'flex';
     ingredientsList.style.overflowX = 'auto';
     ingredientsList.style.whiteSpace = 'nowrap';
+    ingredientsList.style.flexWrap = 'wrap';  // Allow wrapping if items overflow
 
     // Display new ingredients
     ingredients.forEach(ingredient => {
         const item = document.createElement('div');
         item.className = 'ingredient-item';
-        
+
+        // Styling for each item (flex and width)
+        item.style.flexShrink = '0';  // Prevent shrinking
+        item.style.marginRight = '10px';  // Space between items
+        item.style.width = '20%';  // Adjust width for responsiveness
+
+        // Create and append image
         const img = document.createElement('img');
         img.src = ingredient.image_url || 'https://via.placeholder.com/80';
         img.alt = ingredient.name;
-        
+        img.style.width = '100%';   // Make image fill the container
+        img.style.height = 'auto';  // Maintain aspect ratio
+        item.appendChild(img);
+
+        // Create and append name
         const name = document.createElement('div');
         name.textContent = ingredient.name;
         name.style.textAlign = 'center';
         name.style.marginTop = '5px';
         name.style.fontSize = '12px';
+        item.appendChild(name);
+
+        // Create and append the text box (input)
+        const inputBox = document.createElement('input');
+        inputBox.type = 'text';
+        inputBox.placeholder = 'Enter details';
+        inputBox.style.marginTop = '5px';
+        item.appendChild(inputBox);
 
+        // Create and append button
         const button = document.createElement('button');
         button.textContent = 'Add';
         button.onclick = () => {
@@ -160,20 +180,15 @@ function displayCustomizationIngredients(ingredients) {
                 displaySelectedCustomizationIngredients();
             }
         };
-
-        // Set specific styles for each item
-        item.style.flexShrink = '0';  // Prevent items from shrinking
-        item.style.marginRight = '10px';  // Space between items
-        item.style.width = '80px';  // Control the item size
-
-        item.appendChild(img);
-        item.appendChild(name);
         item.appendChild(button);
+
+        // Append the item to the list
         ingredientsList.appendChild(item);
     });
 }
 
 
+
 function displaySelectedCustomizationIngredients() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {