Update static/styles.css

static/styles.css

@@ -11,8 +11,8 @@ body {
 
 .chat-container {
     background-color: #fff;
-    width: 400px; /* Increase width */
-    height: 600px; /* Increase height */
+    width: 400px; /* Increased width */
+    height: 600px; /* Increased height */
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     overflow: hidden;
@@ -50,15 +50,37 @@ body {
 }
 
 .ingredient-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    display: block; /* Change to block to stack vertically */
+    width: 100%; /* Make the ingredient item take full width */
     padding: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 15px; /* More space between items */
     border: 1px solid #ddd;
     border-radius: 5px;
 }
 
+.ingredient-item img {
+    width: 100%; /* Make image fill the width of the container */
+    max-width: 150px; /* Set a max-width for images */
+    height: auto;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.ingredient-item .name {
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+.ingredient-item .description {
+    font-size: 12px;
+    color: #666;
+    margin-top: 5px;
+    text-align: center;
+}
+
 button {
     background-color: #4CAF50;
     color: white;
@@ -66,6 +88,8 @@ button {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    width: 100%;
+    margin-top: 10px;
 }
 
 button:hover {