Update static/styles.css

static/styles.css

@@ -68,6 +68,8 @@ body {
     flex-shrink: 0;
     background-color: white;
     box-sizing: border-box;
+    position: sticky;
+    bottom: env(safe-area-inset-bottom);
 }
 
 .chat-input input {
@@ -76,7 +78,7 @@ body {
     border: 1px solid #ccc;
     border-radius: 8px;
     font-size: 0.875rem;
-    min-height: 40px;
+    min-height: 48px;
     box-sizing: border-box;
 }
 
@@ -89,8 +91,9 @@ body {
     border-radius: 8px;
     cursor: pointer;
     font-size: 0.875rem;
-    min-height: 40px;
-    min-width: 70px;
+    min-height: 48px;
+    min-width: 80px;
+    transition: background-color 0.2s ease;
 }
 
 .chat-input button:hover {
@@ -99,7 +102,7 @@ body {
 
 .items-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 12px;
     padding: 12px;
     margin: 8px 0;
@@ -171,6 +174,8 @@ body {
     font-size: 0.75rem;
     flex: 1;
     min-width: 50px;
+    min-height: 36px;
+    transition: background-color 0.2s ease;
 }
 
 .show-button {
@@ -206,7 +211,9 @@ body {
     border-radius: 8px;
     cursor: pointer;
     font-size: 0.875rem;
-    min-width: 70px;
+    min-width: 80px;
+    min-height: 48px;
+    transition: opacity 0.2s ease;
 }
 
 .option-button.green { background-color: #4caf50; }
@@ -226,6 +233,7 @@ body {
     align-items: center;
     gap: 8px;
     position: relative;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .selection-box::before {
@@ -237,8 +245,10 @@ body {
     padding: 8px;
     border-radius: 8px 8px 0 0;
     font-size: 0.875rem;
+    font-weight: bold;
     width: 100%;
     box-sizing: border-box;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .selection-box span {
@@ -274,7 +284,9 @@ body {
     border-radius: 8px;
     cursor: pointer;
     font-size: 0.875rem;
-    min-width: 70px;
+    min-width: 80px;
+    min-height: 48px;
+    transition: background-color 0.2s ease;
 }
 
 .submit-button:hover {
@@ -290,6 +302,8 @@ body {
     border-radius: 8px;
     cursor: pointer;
     font-size: 0.75rem;
+    min-height: 36px;
+    transition: background-color 0.2s ease;
 }
 
 .remove-button:hover {
@@ -298,10 +312,11 @@ body {
 
 .manual-input, .order-name-input {
     padding: 6px;
-    border: 1px solid bounds;
+    border: 1px solid #0288d1;
     border-radius: 8px;
     font-size: 0.875rem;
     width: 120px;
+    min-height: 48px;
 }
 
 .quantity-input {
@@ -310,6 +325,23 @@ body {
     border-radius: 8px;
     font-size: 0.875rem;
     width: 60px;
+    min-height: 48px;
+}
+
+.quantity-button {
+    padding: 4px 8px;
+    background-color: #0288d1;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.75rem;
+    min-height: 36px;
+    transition: background-color 0.2s ease;
+}
+
+.quantity-button:hover {
+    background-color: #0277bd;
 }
 
 .spinner {
@@ -368,15 +400,15 @@ body {
 
     .chat-input input {
         font-size: 0.75rem;
-        min-height: 36px;
+        min-height: 48px;
         padding: 6px;
     }
 
     .chat-input button {
         font-size: 0.75rem;
-        min-height: 36px;
+        min-height: 48px;
         padding: 6px 10px;
-        min-width: 60px;
+        min-width: 80px;
     }
 
     .items-grid {
@@ -398,13 +430,14 @@ body {
     }
 
     .item-field, .item-description {
-        font-size: 0.625rem;
+        font-size: 0.75rem;
     }
 
-    .show-button, .add-button {
-        font-size: 0.625rem;
+    .show-button, .add-button, .quantity-button {
+        font-size: 0.75rem;
         padding: 4px;
         min-width: 40px;
+        min-height: 36px;
     }
 
     .options-container {
@@ -417,6 +450,7 @@ body {
         font-size: 0.75rem;
         padding: 6px 10px;
         min-width: 100%;
+        min-height: 48px;
     }
 
     .selection-box {
@@ -435,7 +469,7 @@ body {
     }
 
     .selected-item {
-        font-size: 0.625rem;
+        font-size: 0.75rem;
         padding: 3px 8px;
     }
 
@@ -447,24 +481,28 @@ body {
     .submit-button {
         font-size: 0.75rem;
         padding: 6px 10px;
-        min-width: 60px;
+        min-width: 80px;
+        min-height: 48px;
     }
 
     .remove-button {
-        font-size: 0.625rem;
+        font-size: 0.75rem;
         padding: 3px 6px;
+        min-height: 36px;
     }
 
     .manual-input, .order-name-input {
         width: 100px;
         font-size: 0.75rem;
         padding: 4px;
+        min-height: 48px;
     }
 
     .quantity-input {
         width: 50px;
         font-size: 0.75rem;
         padding: 4px;
+        min-height: 48px;
     }
 }
 
@@ -488,17 +526,17 @@ body {
 
     .chat-input input {
         font-size: 0.875rem;
-        min-height: 38px;
+        min-height: 48px;
     }
 
     .chat-input button {
         font-size: 0.875rem;
-        min-height: 38px;
+        min-height: 48px;
         padding: 7px 11px;
     }
 
     .items-grid {
-        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
         gap: 10px;
     }
 
@@ -514,15 +552,17 @@ body {
         font-size: 0.75rem;
     }
 
-    .show-button, .add-button {
+    .show-button, .add-button, .quantity-button {
         font-size: 0.75rem;
         padding: 5px;
         min-width: 45px;
+        min-height: 36px;
     }
 
     .option-button {
         font-size: 0.875rem;
         padding: 7px 11px;
+        min-height: 48px;
     }
 
     .selection-box {
@@ -546,21 +586,25 @@ body {
     .submit-button {
         font-size: 0.875rem;
         padding: 7px 11px;
+        min-height: 48px;
     }
 
     .remove-button {
         font-size: 0.75rem;
         padding: 4px 7px;
+        min-height: 36px;
     }
 
     .manual-input, .order-name-input {
         width: 110px;
         font-size: 0.875rem;
+        min-height: 48px;
     }
 
     .quantity-input {
         width: 55px;
         font-size: 0.875rem;
+        min-height: 48px;
     }
 }