Remove defaults from Button

web/src/components/Button.vue

@@ -3,7 +3,7 @@
 
 <template>
     <button
-        class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2"
+        class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2"
     >
         <slot></slot>
     </button>

web/src/components/TransactionInputRow.vue

@@ -52,18 +52,22 @@ function saveTransaction(e: MouseEvent) {
 
 <template>
     <tr>
+        <label class="md:hidden">Date</label>
         <td class="text-sm">
             <DateInput class="border-b-2 border-black" v-model="TX.Date" />
         </td>
+        <label class="md:hidden">Payee</label>
         <td>
             <Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
         </td>
+        <label class="md:hidden">Category</label>
         <td>
             <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
         </td>
-        <td>
+        <td class="col-span-2">
             <input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
         </td>
+        <label class="md:hidden">Amount</label>
         <td class="text-right">
             <input
                 class="text-right block w-full border-b-2 border-black"
@@ -71,7 +75,7 @@ function saveTransaction(e: MouseEvent) {
                 v-model="TX.Amount"
             />
         </td>
-        <td>
+        <td class="hidden md:table-cell">
             <Button class="bg-blue-500" @click="saveTransaction">Save</Button>
         </td>
     </tr>

web/src/pages/Account.vue

@@ -70,17 +70,17 @@ function createReconcilationTransaction() {
         <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
             Is
             <Currency :value="transactions.ReconcilingBalance" />your current balance?
-            <Button class="bg-blue-500 mx-3" @click="submitReconcilation">Yes!</Button>
+            <Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>
             <br />No, it's:
             <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
             Difference:
             <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
             <Button
-                class="bg-orange-500 mx-3"
+                class="bg-orange-500 mx-3 py-2"
                 v-if="Math.abs(transactions.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
                 @click="createReconcilationTransaction"
             >Create reconciling Transaction</Button>
-            <Button class="bg-red-500 mx-3" @click="cancelReconcilation">Cancel</Button>
+            <Button class="bg-red-500 mx-3 py-2" @click="cancelReconcilation">Cancel</Button>
         </span>
     </div>
 

web/src/pages/Settings.vue

@@ -82,22 +82,21 @@ function ynabExport() {
                 <h2 class="text-lg font-bold">Clear Budget</h2>
                 <p>This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!</p>
 
-                <Button class="bg-red-500" @click="clearBudget">Clear budget</Button>
+                <Button class="bg-red-500 py-2" @click="clearBudget">Clear budget</Button>
             </Card>
             <Card class="flex-col p-3">
                 <h2 class="text-lg font-bold">Delete Budget</h2>
                 <p>This deletes the whole bugdet including all transactions, assignments, accounts and categories. Not undoable!</p>
-                <Button class="bg-red-500" @click="deleteBudget">Delete budget</button>
+                <Button class="bg-red-500 py-2" @click="deleteBudget">Delete budget</button>
             </Card>
             <Card class="flex-col p-3">
                 <h2 class="text-lg font-bold">Fix all historic negative category-balances</h2>
                 <p>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</p>
-                <Button class="bg-orange-500" @click="cleanNegative">Fix negative</button>
+                <Button class="bg-orange-500 py-2" @click="cleanNegative">Fix negative</button>
             </Card>
             <Card class="flex-col p-3">
                 <h2 class="text-lg font-bold">Import YNAB Budget</h2>
                 
-                <div class="flex flex-row">
                 <div>
                     <label for="transactions_file">
                         Transaktionen:
@@ -110,14 +109,13 @@ function ynabExport() {
                     </label>
                 </div>
 
-                    <Button class="bg-blue-500" :disabled="filesIncomplete" @click="ynabImport">Importieren</Button>
+                <Button class="bg-blue-500 py-2" :disabled="filesIncomplete" @click="ynabImport">Importieren</Button>
-                </div>
             </Card>
             <Card class="flex-col p-3">
                 <h2 class="text-lg font-bold">Export as YNAB TSV</h2>
 
                 <div class="flex flex-row">
-                    <Button class="bg-blue-500" @click="ynabExport">Export</Button>
+                    <Button class="bg-blue-500 py-2" @click="ynabExport">Export</Button>
                 </div>
             </Card>
         </div>