Update static/styles.css

static/styles.css

@@ -327,14 +327,75 @@ body {
     background-color: #b71c1c;
 }
 
-/* Mobile Responsiveness */
-@media (max-width: 768px) {
-    .chat-container {
-        height: 100vh;
-        margin: 0;
+/* Mobile Viewpoint Sizes */
+@media (max-width: 320px) { /* Small phones (e.g., iPhone 5/SE) */
+    .chat-header {
+        font-size: 10px;
+        padding: 3px;
+    }
+    .chat-messages {
+        padding: 2px;
+    }
+    .chat-input input, .chat-input button {
+        padding: 2px;
+        font-size: 8px;
+        min-height: 20px;
+    }
+    .ingredients-list {
+        max-height: 60px;
+        padding: 2px;
+        gap: 2px;
+    }
+    .ingredient-image {
+        width: 20px;
+        height: 20px;
+    }
+    .ingredient-name {
+        font-size: 6px;
+        margin-top: 2px;
+    }
+    .show-desc-button {
+        font-size: 5px;
+        padding: 1px 3px;
+    }
+    .popup-content {
+        max-width: 75%;
+        padding: 3px;
+    }
+    .popup-image {
+        width: 30px;
+        height: 30px;
+    }
+    .popup-add-button, .popup-close-button {
+        padding: 1px 3px;
+        font-size: 6px;
+    }
+    .selection-box {
+        padding: 2px;
+        gap: 2px;
     }
+    .selected-item {
+        padding: 1px 3px;
+    }
+    .selected-item-image {
+        width: 15px;
+        height: 15px;
+    }
+    .remove-button {
+        padding: 1px 3px;
+        font-size: 6px;
+    }
+    .manual-input {
+        padding: 2px;
+        width: 80px;
+        font-size: 8px;
+    }
+}
+
+@media (min-width: 321px) and (max-width: 480px) { /* Medium phones (e.g., iPhone 6/7/8) */
     .chat-header {
         font-size: 12px;
+        padding: 4px;
     }
     .chat-messages {
         padding: 3px;
@@ -346,6 +407,8 @@ body {
     }
     .ingredients-list {
         max-height: 80px;
+        padding: 3px;
+        gap: 3px;
     }
     .ingredient-image {
         width: 25px;
@@ -353,6 +416,7 @@ body {
     }
     .ingredient-name {
         font-size: 8px;
+        margin-top: 2px;
     }
     .show-desc-button {
         font-size: 6px;
@@ -371,13 +435,87 @@ body {
         font-size: 8px;
     }
     .selection-box {
+        padding: 3px;
         gap: 3px;
     }
     .selected-item {
         padding: 2px 4px;
     }
+    .selected-item-image {
+        width: 18px;
+        height: 18px;
+    }
     .remove-button {
         padding: 2px 4px;
         font-size: 8px;
     }
+    .manual-input {
+        padding: 2px;
+        width: 100px;
+        font-size: 10px;
+    }
+}
+
+@media (min-width: 481px) and (max-width: 768px) { /* Large phones (e.g., iPhone X, Galaxy Note) */
+    .chat-header {
+        font-size: 14px;
+        padding: 5px;
+    }
+    .chat-messages {
+        padding: 5px;
+    }
+    .chat-input input, .chat-input button {
+        padding: 4px;
+        font-size: 12px;
+        min-height: 30px;
+    }
+    .ingredients-list {
+        max-height: 100px;
+        padding: 5px;
+        gap: 5px;
+    }
+    .ingredient-image {
+        width: 30px;
+        height: 30px;
+    }
+    .ingredient-name {
+        font-size: 10px;
+        margin-top: 3px;
+    }
+    .show-desc-button {
+        font-size: 8px;
+        padding: 2px 5px;
+    }
+    .popup-content {
+        max-width: 85%;
+        padding: 10px;
+    }
+    .popup-image {
+        width: 50px;
+        height: 50px;
+    }
+    .popup-add-button, .popup-close-button {
+        padding: 3px 6px;
+        font-size: 10px;
+    }
+    .selection-box {
+        padding: 5px;
+        gap: 5px;
+    }
+    .selected-item {
+        padding: 3px 5px;
+    }
+    .selected-item-image {
+        width: 20px;
+        height: 20px;
+    }
+    .remove-button {
+        padding: 2px 5px;
+        font-size: 10px;
+    }
+    .manual-input {
+        padding: 3px;
+        width: 120px;
+        font-size: 12px;
+    }
 }