Improve mobile responsiveness across expense tracking interface

- Add horizontal margins to modals on mobile devices
- Optimize grid layouts with smaller breakpoints (md→sm)
- Make action buttons full-width on mobile with touch optimization
- Adjust text sizes and spacing for better mobile readability
- Enhance date filter and export controls for mobile interaction

components/ExpenseDetailsModal.vue

@@ -253,7 +253,7 @@ const downloadAllReceipts = async () => {
 }
 
 .modal-content {
-  @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden;
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden mx-4 sm:mx-0;
 }
 
 .modal-header {

components/ExpenseList.vue

@@ -22,8 +22,8 @@
       </div>
     </div>
 
-    <!-- Expense Grid -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <!-- Expense Grid - Mobile optimized -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
       <div
         v-for="expense in expenses"
         :key="expense.Id"

components/PDFOptionsModal.vue

@@ -255,7 +255,7 @@ watch(() => props.modelValue, (isOpen) => {
 }
 
 .modal-content {
-  @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-hidden;
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-hidden mx-4 sm:mx-0;
 }
 
 .modal-header {

components/ReceiptViewerModal.vue

@@ -258,7 +258,7 @@ watch(() => props.modelValue, (isOpen) => {
 }
 
 .modal-content {
-  @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden;
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden mx-2 sm:mx-4;
 }
 
 .modal-header {