Update static/styles.css

static/styles.css

@@ -124,49 +124,63 @@ body {
     opacity: 0.9;
 }
 
-/* New CSS for scrollable ingredients list */
+/* Horizontal scrollable ingredient list with images */
 .ingredients-list {
-    max-height: 200px; /* Fixed height for scrollable area */
-    overflow-y: auto;
-    border: 1px solid #ccc;
+    max-height: 200px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
     padding: 10px;
     margin: 10px 0;
     background-color: #f9f9f9;
     border-radius: 5px;
+    display: flex;
+    gap: 10px;
+}
+
+.ingredients-list .ingredient-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 15px;
+}
+
+.ingredients-list img {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 5px;
 }
 
 .ingredients-list button {
-    display: block;
-    width: 100%;
-    text-align: left;
-    margin: 5px 0;
-    padding: 8px;
-    background-color: #fff;
-    border: 1px solid #ddd;
+    padding: 5px 10px;
+    margin-top: 5px;
+    background-color: #4caf50;
+    color: white;
+    border: none;
     border-radius: 5px;
     cursor: pointer;
+    font-size: 12px;
 }
 
 .ingredients-list button:hover {
-    background-color: #e0e0e0;
+    background-color: #45a049;
 }
 
+/* Non-editable selected ingredients box */
 .selected-ingredients {
     padding: 10px;
     margin: 10px 0;
     border: 1px solid #ccc;
     border-radius: 5px;
     background-color: #f0f0f0;
+    overflow-y: auto;
+    max-height: 100px;
 }
 
-.selected-ingredients textarea {
-    width: 100%;
-    height: 80px;
-    resize: vertical;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 5px;
-    font-size: 14px;
+.selected-ingredients div {
+    margin: 5px 0;
+    word-wrap: break-word;
 }
 
 /* Media Queries */
@@ -199,12 +213,17 @@ body {
     }
 
     .ingredients-list {
-        max-height: 150px; /* Adjusted for mobile */
+        max-height: 150px;
     }
 
-    .selected-ingredients textarea {
+    .ingredients-list img {
+        width: 60px;
         height: 60px;
     }
+
+    .selected-ingredients {
+        max-height: 80px;
+    }
 }
 
 @media (min-width: 769px) {
@@ -233,10 +252,15 @@ body {
     }
 
     .ingredients-list {
-        max-height: 250px; /* Adjusted for desktop */
+        max-height: 250px;
     }
 
-    .selected-ingredients textarea {
+    .ingredients-list img {
+        width: 100px;
         height: 100px;
     }
+
+    .selected-ingredients {
+        max-height: 120px;
+    }
 }