padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves Add Expense dialog layout

Browse source 
Enhances the Add Expense dialog's layout for better usability.

Reduces the maximum height of the dialog, adjusts padding and margins,
and ensures scrollable content has a minimum height for a more consistent
user experience.
This commit is contained in:
padreug 2025-11-07 22:06:58 +01:00
parent 358c3056c7
commit 0f795f9d18
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/modules/expenses/components/AddExpense.vue
View file

@ -1,8 +1,8 @@
<template>
<Dialog :open="true" @update:open="(open) => !open && $emit('close')">
<DialogContent class="max-w-2xl max-h-[90vh] overflow-hidden flex flex-col p-0">
<DialogContent class="max-w-2xl max-h-[85vh] my-4 overflow-hidden flex flex-col p-0 gap-0">
<!-- Header -->
<DialogHeader class="px-6 pt-6 pb-4 border-b">
<DialogHeader class="px-6 pt-6 pb-4 border-b shrink-0">
<DialogTitle class="flex items-center gap-2">
<DollarSign class="h-5 w-5 text-primary" />
<span>Add Expense</span>
@ -13,7 +13,7 @@
</DialogHeader>
<!-- Scrollable Form Content -->
<div class="flex-1 overflow-y-auto px-6 py-4 space-y-4">
<div class="flex-1 overflow-y-auto px-6 py-4 space-y-4 min-h-0">
<!-- Step indicator -->
<div class="flex items-center justify-center gap-2 mb-4">
<div
@ -173,7 +173,7 @@
</div>
<!-- Action buttons -->
<div class="flex items-center gap-2 pt-2">
<div class="flex items-center gap-2 pt-2 pb-6">
<Button
type="button"
variant="outline"