Update templates/menu.html

templates/menu.html

@@ -1158,8 +1158,8 @@
         }
         .ingredients-list, .menu-items-list, .customization-ingredients-list {
             display: flex;
-            flex-wrap: nowrap;
-            overflow-x: auto;
+            flex-wrap: nowrap;  /* Ensure items stay in a single row */
+            overflow-x: auto;  /* Allow horizontal scrolling */
             padding: 10px;
             margin: 10px 0;
             background-color: #f5f7fa;
@@ -1168,7 +1168,8 @@
             scroll-behavior: smooth;
         }
         .ingredient-item, .menu-item {
-            flex: 0 0 200px;
+            flex: 0 0 auto;  /* Ensure items don't stretch */
+            width: 200px;  /* Set a fixed width for each item */
             background-color: #ffffff;
             border: 1px solid #e0e0e0;
             border-radius: 10px;
@@ -1334,14 +1335,11 @@
                 padding: 8px 15px;
             }
             .ingredients-list, .menu-items-list, .customization-ingredients-list {
-                flex-direction: column;
+                flex-direction: row;  /* Keep the items in a row on mobile */
                 gap: 10px;
-                padding: 8px;
             }
             .ingredient-item, .menu-item {
-                flex: 0 0 auto;
-                width: 100%;
-                max-width: 250px;
+                 flex: 0 0 150px;  /* Adjust the item width to fit smaller screens */
             }
             .ingredient-item img, .menu-item img {
                 height: 100px;