Improve layout of new transaction on mobile

web/src/components/Autocomplete.vue

@@ -86,7 +86,7 @@ function clear() {
       v-if="id == undefined"
       v-model="SearchQuery"
       type="text"
-      class="border-b-2 border-black"
+      class="border-b-2 border-black block w-full border-b-2 border-black"
       @keypress="keypress"
     />
     <span

web/src/components/Modal.vue

@@ -48,7 +48,7 @@ function submitDialog() {
     class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
   >
     <div
-      class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black"
+      class="relative md:top-20 md:mx-auto p-5 md:w-96 shadow-lg md:h-auto h-full rounded-md bg-white dark:bg-black"
     >
       <div class="mt-3 text-center">
         <h3

web/src/components/TransactionInputRow.vue

@@ -63,7 +63,7 @@ defineExpose({Save});
     <td class="text-sm">
       <DateInput
         v-model="TX.Date"
-        class="border-b-2 border-black"
+        class="block w-full border-b-2 border-black"
       />
     </td>
     <label class="md:hidden">Payee</label>
@@ -83,6 +83,7 @@ defineExpose({Save});
         model="categories"
       />
     </td>
+    <label class="md:hidden">Memo</label>
     <td class="col-span-2">
       <Input
         v-model="TX.Memo"

web/src/pages/Account.vue

@@ -162,7 +162,7 @@ function createReconcilationTransaction() {
       </template>
       <TransactionInputRow
         ref="modalInputRow"
-        class="grid grid-cols-2"
+        class="flex flex-col w-full h-full top-0"
         :budgetid="budgetid"
         :accountid="accountid"
       />