Update static/styles.css

static/styles.css

@@ -101,38 +101,62 @@ body {
 }
 
 .ingredients-list {
-    max-height: 150px;
+    max-height: 300px;
     overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
+    overflow-y: auto;
     padding: 10px;
     margin: 10px 0;
     background-color: #f9f9f9;
     border-radius: 5px;
     display: flex;
+    flex-wrap: wrap;
     gap: 10px;
 }
 
 .ingredient-item {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
-    align-items: center;
-    margin-right: 10px;
-    cursor: pointer;
+    align-items: flex-start;
+    width: 220px;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+}
+
+.ingredient-item:hover {
+    transform: translateY(-5px);
 }
 
 .ingredient-image {
-    width: 50px;
-    height: 50px;
+    width: 100%;
+    height: 120px;
     object-fit: cover;
     border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.ingredient-content {
+    width: 100%;
 }
 
 .ingredient-name {
-    text-align: center;
-    margin-top: 5px;
-    font-size: 12px;
+    font-size: 16px;
+    font-weight: bold;
     color: #333;
+    margin-bottom: 5px;
+}
+
+.menu-item-field {
+    font-size: 12px;
+    margin: 3px 0;
+    color: #555;
+}
+
+.menu-item-field strong {
+    color: #0288d1;
 }
 
 .show-desc-button {
@@ -143,8 +167,9 @@ body {
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    font-size: 10px;
+    font-size: 12px;
     width: 100%;
+    transition: background-color 0.3s;
 }
 
 .show-desc-button:hover {
@@ -244,6 +269,24 @@ body {
     margin-left: 10px;
 }
 
+.quantity-input {
+    padding: 5px;
+    border: 1px solid #0288d1;
+    border-radius: 5px;
+    font-size: 14px;
+    width: 60px;
+    margin-left: 10px;
+}
+
+.order-name-input {
+    padding: 5px;
+    border: 1px solid #0288d1;
+    border-radius: 5px;
+    font-size: 14px;
+    width: 150px;
+    margin-left: 10px;
+}
+
 .description-popup {
     position: fixed;
     top: 0;
@@ -276,12 +319,6 @@ body {
     margin-bottom: 10px;
 }
 
-.menu-item-field {
-    margin: 5px 0;
-    font-size: 12px;
-    text-align: left;
-}
-
 .button-container {
     display: flex;
     justify-content: center;
@@ -347,18 +384,23 @@ body {
         min-height: 35px;
     }
     .ingredients-list {
-        max-height: 120px;
+        max-height: 250px;
+    }
+    .ingredient-item {
+        width: 180px;
     }
     .ingredient-image {
-        width: 40px;
-        height: 40px;
+        height: 100px;
     }
     .ingredient-name {
+        font-size: 14px;
+    }
+    .menu-item-field {
         font-size: 10px;
     }
     .show-desc-button {
-        font-size: 8px;
-        padding: 3px 6px;
+        font-size: 10px;
+        padding: 4px 8px;
     }
     .popup-content {
         max-width: 85%;
@@ -372,9 +414,6 @@ body {
         padding: 4px 8px;
         font-size: 10px;
     }
-    .menu-item-field {
-        font-size: 10px;
-    }
     .selection-box {
         gap: 5px;
     }
@@ -385,7 +424,10 @@ body {
         padding: 3px 8px;
         font-size: 10px;
     }
-    .manual-input {
+    .manual-input, .order-name-input {
         width: 120px;
     }
+    .quantity-input {
+        width: 50px;
+    }
 }