feat(libra): expense/income form UI fixes #139

Merged
padreug merged 4 commits from feat/libra-expense-ui-fixes into dev 2026-06-25 20:43:36 +00:00
2 changed files with 83 additions and 78 deletions
Showing only changes of commit 49e7afb0ab - Show all commits

feat(libra): put Amount and Currency on the same row

Wrap the Amount and Currency fields in a two-column grid on both the
expense (AddExpense.vue) and income (AddIncome.vue) forms, and add
w-full to the currency SelectTrigger so the dropdown fills its column.
Tightens the vertical layout of the entry dialogs.
Padreug 2026-06-25 22:16:44 +02:00

View file

@ -106,6 +106,7 @@
</FormItem> </FormItem>
</FormField> </FormField>
<div class="grid grid-cols-2 gap-4">
<FormField v-slot="{ componentField }" name="amount"> <FormField v-slot="{ componentField }" name="amount">
<FormItem> <FormItem>
<FormLabel>Amount *</FormLabel> <FormLabel>Amount *</FormLabel>
@ -128,7 +129,7 @@
<FormLabel>Currency *</FormLabel> <FormLabel>Currency *</FormLabel>
<Select v-bind="componentField"> <Select v-bind="componentField">
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger class="w-full">
<SelectValue placeholder="Select currency" /> <SelectValue placeholder="Select currency" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@ -142,6 +143,7 @@
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</div>
<FormField v-slot="{ componentField }" name="reference"> <FormField v-slot="{ componentField }" name="reference">
<FormItem> <FormItem>

View file

@ -113,6 +113,8 @@
</FormItem> </FormItem>
</FormField> </FormField>
<!-- Amount + Currency -->
<div class="grid grid-cols-2 gap-4">
<!-- Amount --> <!-- Amount -->
<FormField v-slot="{ componentField }" name="amount"> <FormField v-slot="{ componentField }" name="amount">
<FormItem> <FormItem>
@ -139,7 +141,7 @@
<FormLabel>Currency *</FormLabel> <FormLabel>Currency *</FormLabel>
<Select v-bind="componentField"> <Select v-bind="componentField">
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger class="w-full">
<SelectValue placeholder="Select currency" /> <SelectValue placeholder="Select currency" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@ -159,6 +161,7 @@
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</div>
<!-- Reference (optional) --> <!-- Reference (optional) -->
<FormField v-slot="{ componentField }" name="reference"> <FormField v-slot="{ componentField }" name="reference">