Update static/script.js

static/script.js

@@ -132,18 +132,26 @@ function displayCustomizationIngredients(ingredients) {
         ingredientsList.innerHTML = ''; // Clear previous list
     }
 
+    // Apply styles to the ingredients list for horizontal scrolling
+    ingredientsList.style.display = 'flex';
+    ingredientsList.style.overflowX = 'auto';
+    ingredientsList.style.whiteSpace = 'nowrap';
+
     // Display new ingredients
     ingredients.forEach(ingredient => {
         const item = document.createElement('div');
         item.className = 'ingredient-item';
+        
         const img = document.createElement('img');
         img.src = ingredient.image_url || 'https://via.placeholder.com/80';
         img.alt = ingredient.name;
+        
         const name = document.createElement('div');
         name.textContent = ingredient.name;
         name.style.textAlign = 'center';
         name.style.marginTop = '5px';
         name.style.fontSize = '12px';
+
         const button = document.createElement('button');
         button.textContent = 'Add';
         button.onclick = () => {
@@ -152,6 +160,12 @@ 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);
@@ -159,6 +173,7 @@ function displayCustomizationIngredients(ingredients) {
     });
 }
 
+
 function displaySelectedCustomizationIngredients() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {