Update static/styles.css

static/styles.css

@@ -135,7 +135,7 @@ body {
     color: #333;
 }
 
-.show-desc-button {
+.show-desc-button, .add-button {
     padding: 5px 10px;
     margin-top: 5px;
     background-color: #4caf50;
@@ -147,7 +147,7 @@ body {
     width: 100%;
 }
 
-.show-desc-button:hover {
+.show-desc-button:hover, .add-button:hover {
     background-color: #45a049;
 }
 
@@ -244,51 +244,6 @@ body {
     margin-left: 10px;
 }
 
-.text-input-container {
-    position: relative;
-    display: inline-block;
-}
-
-.suggestion-box {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background-color: white;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    max-height: 150px;
-    overflow-y: auto;
-    width: 100%;
-    z-index: 1000;
-    display: none;
-}
-
-.suggestion-item {
-    padding: 5px 10px;
-    cursor: pointer;
-    font-size: 12px;
-}
-
-.suggestion-item:hover {
-    background-color: #f0f0f0;
-}
-
-.dietary-button {
-    padding: 5px 10px;
-    margin-right: 5px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 12px;
-    color: white;
-}
-
-.dietary-button.green { background-color: #4caf50; }
-.dietary-button.red { background-color: #d32f2f; }
-.dietary-button.gray { background-color: #616161; }
-.dietary-button:hover { opacity: 0.9; }
-
-/* Popup Styles */
 .description-popup {
     position: fixed;
     top: 0;
@@ -313,6 +268,16 @@ body {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
+.popup-content ul {
+    text-align: left;
+    margin: 10px 0;
+}
+
+.popup-content ul li {
+    margin: 5px 0;
+    font-size: 12px;
+}
+
 .popup-image {
     width: 80px;
     height: 80px;
@@ -381,7 +346,7 @@ body {
     .ingredient-name {
         font-size: 10px;
     }
-    .show-desc-button {
+    .show-desc-button, .add-button {
         font-size: 8px;
         padding: 3px 6px;
     }
@@ -389,6 +354,9 @@ body {
         max-width: 85%;
         padding: 10px;
     }
+    .popup-content ul li {
+        font-size: 10px;
+    }
     .popup-image {
         width: 60px;
         height: 60px;
@@ -410,8 +378,4 @@ body {
     .manual-input {
         width: 120px;
     }
-    .suggestion-box {
-        max-height: 120px;
-        font-size: 10px;
-    }
 }