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.

components/EmailThreadView.vue

@@ -5,12 +5,18 @@
       Email History
       <v-spacer />
       <v-btn
-        icon="mdi-refresh"
-        size="small"
+        :icon="mobile ? undefined : 'mdi-refresh'"
+        :size="mobile ? 'default' : 'small'"
         variant="text"
         @click="loadEmails"
         :loading="loading"
-      />
+        :class="mobile ? 'rounded-circle' : ''"
+      >
+        <v-icon v-if="!loading">mdi-refresh</v-icon>
+        <v-tooltip v-if="mobile" activator="parent" location="bottom">
+          Refresh emails
+        </v-tooltip>
+      </v-btn>
     </v-card-title>
     <v-card-text>
       <div v-if="loading && threads.length === 0" class="text-center py-8">
@@ -147,6 +153,7 @@ const emit = defineEmits<{
 
 const user = useDirectusUser();
 const toast = useToast();
+const { mobile } = useDisplay();
 
 const loading = ref(false);
 const threads = ref<EmailThread[]>([]);
@@ -287,4 +294,109 @@ defineExpose({
   font-size: 0.875rem;
   line-height: 1.5;
 }
+
+/* Mobile-specific styles */
+@media (max-width: 768px) {
+  /* Fix container width on mobile */
+  :deep(.v-card) {
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+  
+  /* Ensure card text doesn't exceed screen width */
+  :deep(.v-card-text) {
+    padding: 8px 12px !important;
+    overflow-x: hidden;
+  }
+  
+  /* Fix expansion panel width */
+  :deep(.v-expansion-panels) {
+    width: 100%;
+    max-width: calc(100vw - 24px);
+  }
+  
+  /* Timeline adjustments for mobile */
+  :deep(.v-timeline) {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
+  
+  :deep(.v-timeline-item) {
+    margin-bottom: 12px !important;
+  }
+  
+  /* Email card adjustments */
+  :deep(.v-timeline-item .v-card) {
+    max-width: calc(100vw - 80px);
+    overflow-x: hidden;
+  }
+  
+  /* Email content width constraints */
+  :deep(.v-card-title) {
+    font-size: 0.875rem !important;
+    padding: 8px 12px !important;
+    word-break: break-word;
+  }
+  
+  :deep(.v-card-subtitle) {
+    font-size: 0.75rem !important;
+    padding: 4px 12px !important;
+    word-break: break-all;
+    overflow-wrap: break-word;
+  }
+  
+  :deep(.v-card-text) {
+    padding: 8px 12px !important;
+    font-size: 0.875rem !important;
+  }
+  
+  /* Fix pre-formatted text width */
+  .email-full pre {
+    font-size: 0.75rem !important;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+  }
+  
+  /* Thread title adjustments */
+  :deep(.v-expansion-panel-title) {
+    padding: 12px !important;
+    min-height: 48px !important;
+  }
+  
+  :deep(.v-expansion-panel-title .font-weight-medium) {
+    font-size: 0.875rem !important;
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+  
+  :deep(.v-expansion-panel-title .text-caption) {
+    font-size: 0.75rem !important;
+  }
+  
+  /* Timeline opposite content (timestamps) */
+  :deep(.v-timeline-item .v-timeline-item__opposite) {
+    max-width: 60px;
+    font-size: 0.7rem !important;
+    padding-right: 4px;
+  }
+  
+  /* Compact email actions */
+  :deep(.v-card-actions) {
+    padding: 4px 8px !important;
+    min-height: 40px !important;
+  }
+  
+  :deep(.v-card-actions .v-btn) {
+    font-size: 0.75rem !important;
+    height: 32px !important;
+  }
+}
+
+/* Ensure text wrapping for long email addresses */
+:deep(.v-card-subtitle) {
+  white-space: normal !important;
+  line-height: 1.3;
+}
 </style>

components/InterestDetailsModal.vue

@@ -194,14 +194,35 @@
                   <span class="text-caption">Request Info</span>
                 </v-btn>
               </v-col>
-              <v-col cols="12">
+              <v-col cols="6">
+                <v-btn
+                  @click="confirmDelete"
+                  variant="outlined"
+                  color="error"
+                  block
+                  :loading="isDeleting"
+                  :disabled="
+                    isRequestingMoreInfo ||
+                    isRequestingMoreInformation ||
+                    isSendingEOI ||
+                    isSaving ||
+                    isDeleting
+                  "
+                  class="mb-2 d-flex flex-column"
+                  size="large"
+                >
+                  <v-icon size="large" class="mb-1">mdi-delete</v-icon>
+                  <span class="text-caption">Delete</span>
+                </v-btn>
+              </v-col>
+              <v-col cols="6">
                 <v-btn
                   @click="() => debouncedSaveInterest ? debouncedSaveInterest() : saveInterest()"
                   variant="flat"
                   color="success"
                   block
                   :loading="isSaving"
-                  :disabled="isSaving"
+                  :disabled="isSaving || isDeleting"
                   class="mb-2 d-flex flex-column"
                   size="large"
                 >