From 9775aa6c51b36ae5981727a753ba625f24127b48 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Sat, 7 Jun 2025 12:02:32 +1000
Subject: [PATCH] Improve account combobox spacing

---
 src/components/ComboBox.vue          | 9 ++++-----
 src/components/TransactionEditor.vue | 6 +++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/ComboBox.vue b/src/components/ComboBox.vue
index 7435d56..7b6ccfc 100644
--- a/src/components/ComboBox.vue
+++ b/src/components/ComboBox.vue
@@ -18,8 +18,8 @@
 
 <template>
 	<div class="relative">
-		<!-- WebKit bug: Does not align baseline correctly unless some text or placeholder is present -->
-		<input type="text" class="bordered-field peer" :class="inputClass" id="account" v-model="selectedValue" placeholder=" " autocomplete="off" ref="inputField">
+		<!-- WebKit bug https://bugs.webkit.org/show_bug.cgi?id=142968: Does not align baseline correctly unless some text or placeholder is present -->
+		<input type="text" class="bordered-field peer pr-7" :class="inputClass" id="account" v-model="selectedValue" placeholder=" " autocomplete="off" ref="inputField">
 		<button type="button" class="absolute inset-y-0 right-0 flex items-center px-2 focus:outline-none" @click="inputField!.focus()">
 			<ChevronUpDownIcon class="h-5 w-5 text-gray-400" />
 		</button>
@@ -33,9 +33,7 @@
 			>
 				<span class="block truncate group-data-[selected=selected]:font-semibold">{{ value }}</span>
 				<span class="hidden group-data-[selected=selected]:flex absolute inset-y-0 right-0 items-center pr-4 text-emerald-600 group-hover:text-white">
-					<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-						<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
-					</svg>
+					<CheckIcon class="w-5 h-5" />
 				</span>
 			</li>
 		</ul>
@@ -43,6 +41,7 @@
 </template>
 
 <script setup lang="ts">
+	import { CheckIcon } from '@heroicons/vue/20/solid';
 	import { ChevronUpDownIcon } from '@heroicons/vue/24/outline';
 	import { useTemplateRef } from 'vue';
 	
diff --git a/src/components/TransactionEditor.vue b/src/components/TransactionEditor.vue
index c14a952..732a284 100644
--- a/src/components/TransactionEditor.vue
+++ b/src/components/TransactionEditor.vue
@@ -49,7 +49,7 @@
 									<option value="cr">Cr</option>
 								</select>
 							</div>
-							<ComboBoxAccounts v-model="posting.account" class="w-full" inputClass="pl-16" />
+							<ComboBoxAccounts v-model="posting.account" class="w-full" inputClass="pl-14" />
 						</div>
 						<button class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" @click="addPosting(posting)">
 							<PlusIcon class="w-4 h-4" />
@@ -57,7 +57,7 @@
 					</div>
 				</td>
 				<template v-if="posting.sign == 'dr'">
-					<td class="amount-dr has-amount py-1 px-1">
+					<td class="amount-dr has-amount py-1 px-1 w-[8rem]">
 						<div class="relative shadow-sm">
 							<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 								<span class="text-gray-500">{{ db.metadata.reporting_commodity }}</span>
@@ -69,7 +69,7 @@
 				</template>
 				<template v-if="posting.sign == 'cr'">
 					<td class="amount-dr py-1 px-1"></td>
-					<td class="amount-cr has-amount py-1 pl-1">
+					<td class="amount-cr has-amount py-1 pl-1 w-[8rem]">
 						<div class="relative shadow-sm">
 							<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 								<span class="text-gray-500">{{ db.metadata.reporting_commodity }}</span>