From bed42c7329e8a90cefc2eb11fe655607abba9bf2 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sat, 12 Jul 2025 14:46:08 -0400
Subject: [PATCH] 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
---
 components/InterestDetailsModal.vue | 14 +-------------
 pages/dashboard/expenses.vue        | 12 ++++++++++--
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/components/InterestDetailsModal.vue b/components/InterestDetailsModal.vue
index 3adea59..088f7c2 100644
--- a/components/InterestDetailsModal.vue
+++ b/components/InterestDetailsModal.vue
@@ -75,18 +75,6 @@
             <v-icon start>mdi-content-save</v-icon>
             Save Changes
           </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>
 
@@ -227,7 +215,7 @@
                   <span class="text-caption">Delete</span>
                 </v-btn>
               </v-col>
-              <v-col cols="6">
+              <v-col cols="12">
                 <v-btn
                   @click="() => debouncedSaveInterest ? debouncedSaveInterest() : saveInterest()"
                   variant="flat"
diff --git a/pages/dashboard/expenses.vue b/pages/dashboard/expenses.vue
index 1156e17..9031696 100644
--- a/pages/dashboard/expenses.vue
+++ b/pages/dashboard/expenses.vue
@@ -32,6 +32,7 @@
               variant="outlined"
               density="comfortable"
               hide-details
+              class="date-input-fix"
             />
           </v-col>
           
@@ -43,6 +44,7 @@
               variant="outlined"
               density="comfortable"
               hide-details
+              class="date-input-fix"
             />
           </v-col>
           
@@ -75,7 +77,7 @@
             <v-btn
               @click="resetToCurrentMonth"
               variant="outlined"
-              size="large"
+              size="default"
               class="w-100"
             >
               Current Month
@@ -197,7 +199,7 @@
         <div class="d-flex flex-wrap align-center">
           <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
               @click="exportCSV"
               :disabled="selectedExpenses.length === 0"
@@ -660,4 +662,10 @@ onMounted(async () => {
 .v-tab {
   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>