From e4df2f0de51f33b1728e545122f28da89f625342 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 19 Apr 2022 21:13:52 +0000
Subject: [PATCH] Improve layout of new transaction on mobile

---
 web/src/components/Autocomplete.vue        | 2 +-
 web/src/components/Modal.vue               | 2 +-
 web/src/components/TransactionInputRow.vue | 3 ++-
 web/src/pages/Account.vue                  | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index 0c68a6c..de06c09 100644
--- a/web/src/components/Autocomplete.vue
+++ b/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
diff --git a/web/src/components/Modal.vue b/web/src/components/Modal.vue
index 63652af..ab01010 100644
--- a/web/src/components/Modal.vue
+++ b/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
diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
index 4704fff..6bcfaf4 100644
--- a/web/src/components/TransactionInputRow.vue
+++ b/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"
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index d5ea4fe..db4fad3 100644
--- a/web/src/pages/Account.vue
+++ b/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"
       />