Update app.py

app.py

@@ -81,40 +81,75 @@ def filter_menu(preference):
 modal_and_cart_js = """
 <style>
   .cart-container {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 15px;
-    margin-bottom: 15px;
-    background-color: #f9f9f9;
+    width: 90%; /* Ensure it fits the screen */
+    margin: auto;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-  }
-  .cart-item {
+    gap: 10px; /* Add space between cart items */
+}
+
+.cart-item {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #ddd;
-    padding: 10px 0;
-  }
-  .cart-item:last-child {
-    border-bottom: none;
-  }
-  .cart-item span {
-    font-size: 16px;
+    flex-wrap: wrap; /* Wrap content to the next line if needed */
+    align-items: center; /* Vertically align items */
+    justify-content: space-between; /* Distribute space between items */
+    width: 100%; /* Ensure it takes full width */
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+}
+
+.cart-item span {
     margin-right: 10px;
-  }
-  .cart-item .quantity-container {
+    flex: 1; /* Allow text to take available space */
+    min-width: 50px; /* Prevent collapsing */
+}
+
+.cart-item .quantity-container {
     display: flex;
     align-items: center;
     gap: 5px;
-  }
-  .cart-total {
-    font-size: 18px;
+}
+
+.cart-item button {
+    background-color: red;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    flex-shrink: 0; /* Prevent the button from shrinking */
+}
+
+.cart-total {
+    font-size: 1.2em;
     font-weight: bold;
-    text-align: right;
+    text-align: center;
+}
+
+button {
     margin-top: 10px;
-  }
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px;
+    border-radius: 5px;
+    width: 100%;
+    cursor: pointer;
+}
+
+@media (max-width: 768px) {
+    .cart-item {
+        flex-direction: column; /* Stack items on mobile */
+        align-items: flex-start; /* Align to the left */
+    }
+    .cart-item button {
+        align-self: flex-end; /* Place the remove button at the end */
+        margin-top: 5px; /* Add some space on top */
+    }
+}
+
 </style>
 <script>
     let cart = [];