fix: Comprehensive mobile UI improvements and fixes

Interest Table Mobile Layout:
- Fixed broken table layout on mobile screens
- Optimized column widths to fit mobile viewports better
- Improved horizontal scrolling with visual indicators
- Enhanced responsive design for contact information display
- Better badge sizing and text truncation on mobile

 Mobile Actions Enhancement:
- Added delete interest button to mobile actions section
- Improved button layout in 2x2 grid for better accessibility
- Added proper loading states and disabled states
- Enhanced visual hierarchy with icons and labels

 Email Communication Fixes:
- Fixed refresh email button icon display on mobile
- Added proper mobile styling and tooltips
- Made button more accessible with larger touch targets

 Email Thread Width Issues:
- Fixed email threads exceeding screen width on mobile
- Implemented proper text wrapping and overflow handling
- Optimized timeline layout for mobile viewports
- Enhanced email card responsiveness
- Better handling of long email addresses and content
- Improved expansion panel sizing and spacing

 Mobile UX Improvements:
- Better touch targets and button sizing
- Improved visual feedback and loading states
- Enhanced text readability with optimized font sizes
- Consistent mobile spacing and padding throughout
- Fixed container overflow issues across components

All mobile components now properly respect viewport constraints and provide optimal user experience on mobile devices.

pages/dashboard/interest-list.vue

@@ -588,58 +588,78 @@ const getRelativeTime = (dateString: string) => {
     position: relative;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    /* Remove negative margins to prevent cutoff */
+    margin: 0 -16px; /* Extend to screen edge */
+    padding: 0 16px; /* Add padding back */
   }
   
   /* Add padding to the wrapper instead */
   .modern-table :deep(.v-table__wrapper) {
-    min-width: 600px; /* Minimum width to ensure scrolling */
+    min-width: 400px; /* Reduced minimum width for mobile */
   }
   
   .modern-table :deep(th) {
-    padding: 8px !important;
+    padding: 8px 4px !important;
     font-size: 0.75rem;
     white-space: nowrap;
   }
   
   .modern-table :deep(td) {
-    padding: 12px 8px !important;
+    padding: 12px 4px !important;
+    vertical-align: middle;
   }
   
-  /* Show all columns but with smaller widths on mobile */
+  /* Optimize mobile column widths to fit better */
   .modern-table :deep(th:nth-child(1)),
   .modern-table :deep(td:nth-child(1)) {
-    min-width: 180px !important;
+    min-width: 220px !important; /* Contact info needs more space */
+    max-width: 220px !important;
   }
   
   .modern-table :deep(th:nth-child(2)),
   .modern-table :deep(td:nth-child(2)) {
-    min-width: 120px !important;
+    min-width: 100px !important;
+    max-width: 100px !important;
   }
   
   .modern-table :deep(th:nth-child(3)),
   .modern-table :deep(td:nth-child(3)) {
-    min-width: 100px !important;
+    min-width: 80px !important;
+    max-width: 80px !important;
   }
   
   /* Contact cell optimization */
   .contact-cell {
-    max-width: 180px;
+    max-width: 220px;
+    padding: 8px 4px !important;
   }
   
   .contact-cell .text-truncate {
-    max-width: 140px;
+    max-width: 160px;
+  }
+  
+  .contact-cell .v-avatar {
+    margin-right: 8px !important;
+    flex-shrink: 0;
   }
   
   /* Adjust table row height on mobile */
   .table-row td {
-    padding: 12px 8px !important;
+    padding: 8px 4px !important;
+    height: auto !important;
+    min-height: 60px;
   }
   
   /* Ensure badges are sized appropriately */
   .modern-table :deep(.v-chip) {
-    height: 20px !important;
+    height: 18px !important;
     font-size: 0.625rem !important;
+    padding: 0 6px !important;
+  }
+  
+  /* Style the date column to be more compact */
+  .modern-table :deep(td:nth-child(3) .text-caption) {
+    font-size: 0.6rem !important;
+    line-height: 1.2;
   }
   
   /* Add visual scroll indicators */
@@ -647,11 +667,28 @@ const getRelativeTime = (dateString: string) => {
     content: '';
     position: absolute;
     top: 0;
-    right: 0;
+    right: 16px;
     bottom: 0;
-    width: 30px;
-    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
+    width: 20px;
+    background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
     pointer-events: none;
+    z-index: 1;
+  }
+  
+  /* Fix container padding */
+  .v-container {
+    padding: 12px 16px !important;
+  }
+  
+  /* Improve mobile row layout */
+  .modern-table :deep(tbody tr) {
+    height: auto !important;
+  }
+  
+  /* Better text overflow handling */
+  .modern-table :deep(td) {
+    word-break: break-word;
+    overflow-wrap: break-word;
   }
 }