Fix visual bugs in expenses page and interest details modal

- Fixed calendar button positioning in date input fields by adding proper padding
- Reduced Current Month button size from large to default for better fit
- Improved export button spacing using ga-4 instead of gap-6
- Removed Save & Close button from InterestDetailsModal, keeping only Save Changes button
- Updated mobile layout to use full width for Save Changes button
This commit is contained in:
Matt 2025-07-12 14:46:08 -04:00
parent 0762306bf3
commit bed42c7329
2 changed files with 11 additions and 15 deletions

View File

@ -75,18 +75,6 @@
<v-icon start>mdi-content-save</v-icon> <v-icon start>mdi-content-save</v-icon>
Save Changes Save Changes
</v-btn> </v-btn>
<v-btn
variant="outlined"
color="success"
size="large"
@click="() => saveInterest(false, true)"
:loading="isSaving"
:disabled="isSaving || isDeleting"
class="ml-2"
>
<v-icon start>mdi-content-save-move</v-icon>
Save & Close
</v-btn>
</v-toolbar-items> </v-toolbar-items>
</v-toolbar> </v-toolbar>
@ -227,7 +215,7 @@
<span class="text-caption">Delete</span> <span class="text-caption">Delete</span>
</v-btn> </v-btn>
</v-col> </v-col>
<v-col cols="6"> <v-col cols="12">
<v-btn <v-btn
@click="() => debouncedSaveInterest ? debouncedSaveInterest() : saveInterest()" @click="() => debouncedSaveInterest ? debouncedSaveInterest() : saveInterest()"
variant="flat" variant="flat"

View File

@ -32,6 +32,7 @@
variant="outlined" variant="outlined"
density="comfortable" density="comfortable"
hide-details hide-details
class="date-input-fix"
/> />
</v-col> </v-col>
@ -43,6 +44,7 @@
variant="outlined" variant="outlined"
density="comfortable" density="comfortable"
hide-details hide-details
class="date-input-fix"
/> />
</v-col> </v-col>
@ -75,7 +77,7 @@
<v-btn <v-btn
@click="resetToCurrentMonth" @click="resetToCurrentMonth"
variant="outlined" variant="outlined"
size="large" size="default"
class="w-100" class="w-100"
> >
Current Month Current Month
@ -197,7 +199,7 @@
<div class="d-flex flex-wrap align-center"> <div class="d-flex flex-wrap align-center">
<span class="text-subtitle-1 font-weight-medium mr-6">Export Options:</span> <span class="text-subtitle-1 font-weight-medium mr-6">Export Options:</span>
<div class="d-flex gap-6"> <div class="d-flex ga-4">
<v-btn <v-btn
@click="exportCSV" @click="exportCSV"
:disabled="selectedExpenses.length === 0" :disabled="selectedExpenses.length === 0"
@ -660,4 +662,10 @@ onMounted(async () => {
.v-tab { .v-tab {
text-transform: none !important; text-transform: none !important;
} }
/* Fix for date input calendar button positioning */
.date-input-fix :deep(.v-field__append-inner) {
padding-inline-start: 8px;
margin-inline-end: 4px;
}
</style> </style>