From 49aa47ab108969e6277f2e82f2371f4676740b6b Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 10 Jun 2025 16:01:21 +0200
Subject: [PATCH] mobile optimization

---
 components/ClientEmailSection.vue   | 190 +++++++++++++-------
 components/EOISection.vue           | 122 +++++++++----
 components/InterestDetailsModal.vue |   7 +-
 pages/dashboard/interest-list.vue   | 270 +++++++++++++++++-----------
 4 files changed, 380 insertions(+), 209 deletions(-)

diff --git a/components/ClientEmailSection.vue b/components/ClientEmailSection.vue
index 856b735..93428bf 100644
--- a/components/ClientEmailSection.vue
+++ b/components/ClientEmailSection.vue
@@ -20,67 +20,90 @@
           @click="showComposer = true"
           color="primary"
           variant="flat"
-          prepend-icon="mdi-email-edit"
+          :prepend-icon="!mobile ? 'mdi-email-edit' : undefined"
+          :icon="mobile ? 'mdi-email-edit' : undefined"
+          :size="mobile ? 'default' : 'default'"
         >
-          Compose Email
+          <span v-if="!mobile">Compose Email</span>
         </v-btn>
         <v-btn
           @click="loadEmailThread"
           variant="text"
           icon="mdi-refresh"
           :loading="isRefreshing"
-          size="small"
+          :size="mobile ? 'small' : 'small'"
         >
           <v-tooltip activator="parent">Refresh Emails</v-tooltip>
         </v-btn>
         <v-spacer />
-        <v-btn
-          @click="reconnectEmail"
-          variant="text"
-          size="small"
-          prepend-icon="mdi-connection"
-        >
-          Reconnect
-        </v-btn>
-        <v-btn
-          @click="disconnectEmail"
-          variant="text"
-          size="small"
-          color="error"
-          prepend-icon="mdi-logout"
-        >
-          Disconnect
-        </v-btn>
+        <v-btn-group v-if="!mobile" variant="text" density="compact">
+          <v-btn
+            @click="reconnectEmail"
+            size="small"
+            prepend-icon="mdi-connection"
+          >
+            Reconnect
+          </v-btn>
+          <v-btn
+            @click="disconnectEmail"
+            size="small"
+            color="error"
+            prepend-icon="mdi-logout"
+          >
+            Disconnect
+          </v-btn>
+        </v-btn-group>
+        <v-menu v-else>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              v-bind="props"
+              icon="mdi-dots-vertical"
+              variant="text"
+              size="small"
+            />
+          </template>
+          <v-list density="compact">
+            <v-list-item @click="reconnectEmail" prepend-icon="mdi-connection">
+              <v-list-item-title>Reconnect</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="disconnectEmail" prepend-icon="mdi-logout" base-color="error">
+              <v-list-item-title>Disconnect</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
       </div>
 
       <!-- Email Thread List -->
       <div v-if="emailThreads.length > 0" class="email-threads">
         <div class="text-subtitle-1 mb-3">Email History</div>
-        <v-timeline side="end" density="comfortable">
+        <v-timeline :side="mobile ? 'end' : 'end'" :density="mobile ? 'compact' : 'comfortable'">
           <v-timeline-item
             v-for="(email, index) in emailThreads"
             :key="index"
             :dot-color="email.direction === 'sent' ? 'primary' : 'success'"
             :icon="email.direction === 'sent' ? 'mdi-email-send' : 'mdi-email-receive'"
-            size="small"
+            :size="mobile ? 'x-small' : 'small'"
           >
-            <template v-slot:opposite>
+            <template v-slot:opposite v-if="!mobile">
               <div class="text-caption">
                 {{ formatDate(email.timestamp) }}
               </div>
             </template>
             
-            <v-card variant="outlined">
-              <v-card-subtitle class="d-flex align-center">
+            <v-card variant="outlined" :density="mobile ? 'compact' : 'default'">
+              <v-card-subtitle class="d-flex align-center justify-space-between">
                 <span class="text-body-2">
                   {{ email.direction === 'sent' ? 'To' : 'From' }}: 
                   {{ email.direction === 'sent' ? email.to : email.from }}
                 </span>
+                <span v-if="mobile" class="text-caption text-grey">
+                  {{ formatDate(email.timestamp) }}
+                </span>
               </v-card-subtitle>
               
-              <v-card-text>
+              <v-card-text :class="mobile ? 'pa-3' : ''">
                 <div class="text-body-2 font-weight-medium mb-2">{{ email.subject }}</div>
-                <div class="email-content" v-html="formatEmailContent(email.content)"></div>
+                <div class="email-content" :class="mobile ? 'email-content-mobile' : ''" v-html="formatEmailContent(email.content)"></div>
                 
                 <!-- Attachments -->
                 <div v-if="email.attachments && email.attachments.length > 0" class="mt-3">
@@ -111,8 +134,14 @@
     </v-card-text>
 
     <!-- Email Composer Dialog -->
-    <v-dialog v-model="showComposer" max-width="800" persistent>
-      <v-card>
+    <v-dialog 
+      v-model="showComposer" 
+      :max-width="mobile ? '100%' : '800'"
+      :fullscreen="mobile"
+      persistent
+      :transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
+    >
+      <v-card :max-height="mobile ? '100vh' : undefined">
         <v-card-title class="d-flex align-center">
           <v-icon class="mr-2">mdi-email-edit</v-icon>
           Compose Email
@@ -139,32 +168,37 @@
             v-model="emailDraft.subject"
             label="Subject"
             variant="outlined"
-            density="comfortable"
+            :density="mobile ? 'compact' : 'comfortable'"
             class="mb-4"
           />
 
           <!-- Quick Actions -->
-          <div class="mb-3">
-            <span class="text-body-2 mr-2">Quick Insert:</span>
-            <v-btn
-              v-if="hasEOI"
-              @click="insertEOILink"
-              size="small"
-              variant="tonal"
-              prepend-icon="mdi-file-document"
-            >
-              EOI Link
-            </v-btn>
-            <v-btn
-              v-if="hasBerth"
-              @click="insertBerthInfo"
-              size="small"
-              variant="tonal"
-              prepend-icon="mdi-anchor"
-              class="ml-2"
-            >
-              Berth Info
-            </v-btn>
+          <div class="mb-3" :class="mobile ? 'd-flex flex-column align-start' : ''">
+            <span class="text-body-2" :class="mobile ? 'mb-2' : 'mr-2'">Quick Insert:</span>
+            <div :class="mobile ? 'd-flex gap-2' : ''">
+              <v-btn
+                v-if="hasEOI"
+                @click="insertEOILink"
+                :size="mobile ? 'x-small' : 'small'"
+                variant="tonal"
+                :prepend-icon="mobile ? undefined : 'mdi-file-document'"
+                :class="!mobile ? '' : ''"
+              >
+                <v-icon v-if="mobile" size="small">mdi-file-document</v-icon>
+                EOI{{ mobile ? '' : ' Link' }}
+              </v-btn>
+              <v-btn
+                v-if="hasBerth"
+                @click="insertBerthInfo"
+                :size="mobile ? 'x-small' : 'small'"
+                variant="tonal"
+                :prepend-icon="mobile ? undefined : 'mdi-anchor'"
+                :class="!mobile ? 'ml-2' : ''"
+              >
+                <v-icon v-if="mobile" size="small">mdi-anchor</v-icon>
+                Berth{{ mobile ? '' : ' Info' }}
+              </v-btn>
+            </div>
           </div>
 
           <!-- Email Content -->
@@ -172,9 +206,10 @@
             v-model="emailDraft.content"
             label="Email Content"
             variant="outlined"
-            rows="12"
+            :rows="mobile ? 8 : 12"
             placeholder="Write your email here..."
             ref="contentTextarea"
+            :density="mobile ? 'compact' : 'default'"
           />
 
           <!-- Signature Settings -->
@@ -237,14 +272,19 @@
             <div class="text-body-2 mb-2">Attachments</div>
             
             <!-- Attachment Options -->
-            <v-btn-toggle v-model="attachmentMode" mandatory class="mb-3">
-              <v-btn value="upload" size="small">
-                <v-icon start>mdi-upload</v-icon>
-                Upload Files
+            <v-btn-toggle 
+              v-model="attachmentMode" 
+              mandatory 
+              class="mb-3"
+              :density="mobile ? 'compact' : 'default'"
+            >
+              <v-btn value="upload" :size="mobile ? 'x-small' : 'small'">
+                <v-icon :start="!mobile" :size="mobile ? 'small' : 'default'">mdi-upload</v-icon>
+                <span :class="mobile ? 'text-caption' : ''">{{ mobile ? 'Upload' : 'Upload Files' }}</span>
               </v-btn>
-              <v-btn value="browse" size="small">
-                <v-icon start>mdi-folder-open</v-icon>
-                Browse Files
+              <v-btn value="browse" :size="mobile ? 'x-small' : 'small'">
+                <v-icon :start="!mobile" :size="mobile ? 'small' : 'default'">mdi-folder-open</v-icon>
+                <span :class="mobile ? 'text-caption' : ''">{{ mobile ? 'Browse' : 'Browse Files' }}</span>
               </v-btn>
             </v-btn-toggle>
 
@@ -254,11 +294,11 @@
               v-model="emailDraft.attachments"
               label="Select files to attach"
               variant="outlined"
-              density="comfortable"
+              :density="mobile ? 'compact' : 'comfortable'"
               multiple
               chips
               prepend-icon="mdi-paperclip"
-              show-size
+              :show-size="!mobile"
             />
             
             <!-- Browse Mode -->
@@ -267,10 +307,11 @@
                 @click="openFileBrowser"
                 variant="outlined"
                 block
-                size="large"
-                prepend-icon="mdi-folder-open"
+                :size="mobile ? 'default' : 'large'"
+                :prepend-icon="!mobile ? 'mdi-folder-open' : undefined"
+                :icon="mobile ? 'mdi-folder-open' : undefined"
               >
-                Browse Files
+                <span v-if="!mobile">Browse Files</span>
               </v-btn>
             </div>
 
@@ -313,8 +354,13 @@
     </v-dialog>
 
     <!-- File Browser Dialog -->
-    <v-dialog v-model="showFileBrowser" max-width="1200" height="80vh">
-      <v-card height="80vh">
+    <v-dialog 
+      v-model="showFileBrowser" 
+      :max-width="mobile ? '100%' : '1200'"
+      :fullscreen="mobile"
+      :transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
+    >
+      <v-card :height="mobile ? '100vh' : '80vh'">
         <v-card-title class="d-flex align-center">
           <v-icon class="mr-2">mdi-folder-open</v-icon>
           Select Files from Browser
@@ -362,6 +408,7 @@ const emit = defineEmits<{
   'update': [];
 }>();
 
+const { mobile } = useDisplay();
 const toast = useToast();
 const showComposer = ref(false);
 const isSending = ref(false);
@@ -802,6 +849,11 @@ const cancelFileBrowser = () => {
   line-height: 1.6;
 }
 
+.email-content-mobile {
+  max-height: 150px;
+  font-size: 0.875rem;
+}
+
 .email-content :deep(p) {
   margin: 0 0 0.5em 0;
 }
@@ -816,4 +868,10 @@ const cancelFileBrowser = () => {
   max-height: 600px;
   overflow-y: auto;
 }
+
+@media (max-width: 768px) {
+  .email-threads {
+    max-height: 400px;
+  }
+}
 </style>
diff --git a/components/EOISection.vue b/components/EOISection.vue
index 66047a1..0423035 100644
--- a/components/EOISection.vue
+++ b/components/EOISection.vue
@@ -35,9 +35,11 @@
           :loading="isGenerating"
           color="primary"
           variant="flat"
-          prepend-icon="mdi-file-document-plus"
+          :prepend-icon="!mobile ? 'mdi-file-document-plus' : undefined"
+          :icon="mobile ? 'mdi-file-document-plus' : undefined"
+          :size="mobile ? 'default' : 'default'"
         >
-          Generate EOI
+          <span v-if="!mobile">Generate EOI</span>
         </v-btn>
       </div>
       
@@ -47,42 +49,45 @@
           @click="showUploadDialog = true"
           :variant="hasEOI ? 'tonal' : 'outlined'"
           :color="hasEOI ? 'success' : 'primary'"
-          prepend-icon="mdi-upload"
+          :prepend-icon="!mobile ? 'mdi-upload' : undefined"
           :disabled="isUploading"
-          size="large"
+          :size="mobile ? 'default' : 'large'"
         >
-          {{ hasEOI ? 'Upload Signed EOI' : 'Upload EOI Document' }}
+          {{ mobile ? 'Upload EOI' : (hasEOI ? 'Upload Signed EOI' : 'Upload EOI Document') }}
         </v-btn>
       </div>
 
       <!-- EOI Status Badge -->
-      <div v-if="hasEOI || hasEOIDocuments" class="mb-4 d-flex align-center">
+      <div v-if="hasEOI || hasEOIDocuments" class="mb-4 d-flex align-center flex-wrap">
         <v-chip
           :color="getStatusColor(interest['EOI Status'])"
           variant="tonal"
-          prepend-icon="mdi-file-document-check"
+          :prepend-icon="!mobile ? 'mdi-file-document-check' : undefined"
+          :size="mobile ? 'small' : 'default'"
+          class="mb-1"
         >
           {{ interest['EOI Status'] }}
         </v-chip>
         <span v-if="interest['EOI Time Sent']" class="text-caption text-grey-darken-1 ml-3">
-          Sent: {{ formatDate(interest['EOI Time Sent']) }}
+          {{ mobile ? '' : 'Sent: ' }}{{ formatDate(interest['EOI Time Sent']) }}
         </span>
       </div>
 
       <!-- Signature Links - Only show if EOI is generated but not uploaded/signed -->
-      <v-list v-if="hasEOI && !isEOISigned" density="comfortable">
+      <v-list v-if="hasEOI && !isEOISigned" :density="mobile ? 'compact' : 'comfortable'">
         <v-list-item class="mb-2">
           <template v-slot:prepend>
-            <v-avatar color="primary" size="40">
-              <v-icon>mdi-account</v-icon>
+            <v-avatar color="primary" :size="mobile ? 32 : 40">
+              <v-icon :size="mobile ? 'small' : 'default'">mdi-account</v-icon>
             </v-avatar>
           </template>
-          <v-list-item-title>Client Signature Link</v-list-item-title>
-          <v-list-item-subtitle>{{ interest['Full Name'] }}</v-list-item-subtitle>
+          <v-list-item-title :class="mobile ? 'text-body-2' : ''">Client Signature Link</v-list-item-title>
+          <v-list-item-subtitle :class="mobile ? 'text-caption' : ''">{{ interest['Full Name'] }}</v-list-item-subtitle>
           <template v-slot:append>
             <v-btn
               icon="mdi-content-copy"
               variant="text"
+              :size="mobile ? 'small' : 'default'"
               @click="copyLink(interest['Signature Link Client'])"
             ></v-btn>
           </template>
@@ -90,16 +95,17 @@
 
         <v-list-item class="mb-2">
           <template v-slot:prepend>
-            <v-avatar color="success" size="40">
-              <v-icon>mdi-account-check</v-icon>
+            <v-avatar color="success" :size="mobile ? 32 : 40">
+              <v-icon :size="mobile ? 'small' : 'default'">mdi-account-check</v-icon>
             </v-avatar>
           </template>
-          <v-list-item-title>CC Signature Link</v-list-item-title>
-          <v-list-item-subtitle>Oscar Faragher</v-list-item-subtitle>
+          <v-list-item-title :class="mobile ? 'text-body-2' : ''">CC Signature Link</v-list-item-title>
+          <v-list-item-subtitle :class="mobile ? 'text-caption' : ''">Oscar Faragher</v-list-item-subtitle>
           <template v-slot:append>
             <v-btn
               icon="mdi-content-copy"
               variant="text"
+              :size="mobile ? 'small' : 'default'"
               @click="copyLink(interest['Signature Link CC'])"
             ></v-btn>
           </template>
@@ -107,16 +113,17 @@
 
         <v-list-item class="mb-2">
           <template v-slot:prepend>
-            <v-avatar color="secondary" size="40">
-              <v-icon>mdi-account-tie</v-icon>
+            <v-avatar color="secondary" :size="mobile ? 32 : 40">
+              <v-icon :size="mobile ? 'small' : 'default'">mdi-account-tie</v-icon>
             </v-avatar>
           </template>
-          <v-list-item-title>Developer Signature Link</v-list-item-title>
-          <v-list-item-subtitle>David Mizrahi</v-list-item-subtitle>
+          <v-list-item-title :class="mobile ? 'text-body-2' : ''">Developer Signature Link</v-list-item-title>
+          <v-list-item-subtitle :class="mobile ? 'text-caption' : ''">David Mizrahi</v-list-item-subtitle>
           <template v-slot:append>
             <v-btn
               icon="mdi-content-copy"
               variant="text"
+              :size="mobile ? 'small' : 'default'"
               @click="copyLink(interest['Signature Link Developer'])"
             ></v-btn>
           </template>
@@ -152,7 +159,7 @@
       <!-- Reminder Settings - Only show if EOI is generated but not uploaded/signed -->
       <v-divider v-if="hasEOI && !isEOISigned" class="mt-4 mb-4" />
       <v-row v-if="hasEOI && !isEOISigned" dense align="center">
-        <v-col cols="auto">
+        <v-col :cols="mobile ? 12 : 'auto'">
           <v-switch
             v-model="remindersEnabled"
             @update:model-value="updateReminderSettings"
@@ -161,9 +168,17 @@
             density="compact"
           >
             <template v-slot:label>
-              <span class="text-body-2">
+              <span :class="mobile ? 'text-caption' : 'text-body-2'">
                 Automatic Reminders
-                <v-tooltip activator="parent" location="top">
+                <v-icon 
+                  v-if="mobile"
+                  size="x-small" 
+                  class="ml-1"
+                  @click.stop="showReminderInfo = true"
+                >
+                  mdi-information-outline
+                </v-icon>
+                <v-tooltip v-else activator="parent" location="top">
                   <div style="max-width: 300px">
                     When enabled, automatic reminders will be sent at 9am and 4pm daily to unsigned recipients
                   </div>
@@ -176,7 +191,12 @@
     </v-card-text>
     
     <!-- Upload Dialog -->
-    <v-dialog v-model="showUploadDialog" max-width="600">
+    <v-dialog 
+      v-model="showUploadDialog" 
+      :max-width="mobile ? '100%' : '600'"
+      :fullscreen="mobile"
+      :transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
+    >
       <v-card>
         <v-card-title class="d-flex align-center">
           <v-icon class="mr-2" color="primary">mdi-upload</v-icon>
@@ -187,26 +207,26 @@
         
         <v-divider />
         
-        <v-card-text class="pa-6">
-          <div class="text-center mb-6">
-            <v-icon size="80" color="primary" class="mb-4">mdi-file-pdf-box</v-icon>
-            <div class="text-h6 mb-2">Choose how to upload your EOI</div>
-            <div class="text-body-2 text-grey">Upload a signed PDF document</div>
+        <v-card-text :class="mobile ? 'pa-4' : 'pa-6'">
+          <div class="text-center" :class="mobile ? 'mb-4' : 'mb-6'">
+            <v-icon :size="mobile ? 60 : 80" color="primary" class="mb-4">mdi-file-pdf-box</v-icon>
+            <div :class="mobile ? 'text-body-1 mb-2' : 'text-h6 mb-2'">Choose how to upload your EOI</div>
+            <div :class="mobile ? 'text-caption' : 'text-body-2'" class="text-grey">Upload a signed PDF document</div>
           </div>
 
           <v-file-input
             v-model="selectedFile"
-            label="Drop your PDF here or click to browse"
+            :label="mobile ? 'Select PDF file' : 'Drop your PDF here or click to browse'"
             accept=".pdf"
             prepend-icon=""
             variant="outlined"
-            density="comfortable"
+            :density="mobile ? 'compact' : 'comfortable'"
             :rules="[v => !!v || 'Please select a file']"
-            show-size
+            :show-size="!mobile"
             class="mt-4"
           >
             <template v-slot:prepend-inner>
-              <v-icon color="primary">mdi-file-pdf-box</v-icon>
+              <v-icon color="primary" :size="mobile ? 'small' : 'default'">mdi-file-pdf-box</v-icon>
             </template>
           </v-file-input>
         </v-card-text>
@@ -215,7 +235,7 @@
         
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn @click="closeUploadDialog" variant="text" size="large">
+          <v-btn @click="closeUploadDialog" variant="text" :size="mobile ? 'default' : 'large'">
             Cancel
           </v-btn>
           <v-btn
@@ -224,17 +244,21 @@
             @click="handleUpload"
             :loading="isUploading"
             :disabled="!selectedFile"
-            size="large"
-            prepend-icon="mdi-upload"
+            :size="mobile ? 'default' : 'large'"
+            :prepend-icon="!mobile ? 'mdi-upload' : undefined"
           >
-            Upload EOI
+            Upload{{ mobile ? '' : ' EOI' }}
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
     
     <!-- Delete Confirmation Dialog -->
-    <v-dialog v-model="showDeleteConfirmDialog" max-width="400">
+    <v-dialog 
+      v-model="showDeleteConfirmDialog" 
+      :max-width="mobile ? '100%' : '400'"
+      :transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
+    >
       <v-card>
         <v-card-title class="d-flex align-center">
           <v-icon class="mr-2" color="error">mdi-alert</v-icon>
@@ -271,6 +295,24 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    
+    <!-- Mobile Reminder Info Dialog -->
+    <v-dialog v-if="mobile" v-model="showReminderInfo" max-width="300">
+      <v-card>
+        <v-card-title class="text-h6">
+          Automatic Reminders
+        </v-card-title>
+        <v-card-text>
+          When enabled, automatic reminders will be sent at 9am and 4pm daily to unsigned recipients.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="primary" variant="text" @click="showReminderInfo = false">
+            Got it
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -286,6 +328,7 @@ const emit = defineEmits<{
   'update': [];
 }>();
 
+const { mobile } = useDisplay();
 const toast = useToast();
 const isGenerating = ref(false);
 const showUploadDialog = ref(false);
@@ -293,6 +336,7 @@ const isUploading = ref(false);
 const selectedFile = ref<File | null>(null);
 const showDeleteConfirmDialog = ref(false);
 const isDeleting = ref(false);
+const showReminderInfo = ref(false);
 
 // Reminder settings
 const remindersEnabled = ref(true);
diff --git a/components/InterestDetailsModal.vue b/components/InterestDetailsModal.vue
index 60f5f25..ad10717 100644
--- a/components/InterestDetailsModal.vue
+++ b/components/InterestDetailsModal.vue
@@ -4,8 +4,9 @@
     fullscreen
     hide-overlay
     transition="dialog-bottom-transition"
+    :scrollable="false"
   >
-    <v-card>
+    <v-card class="d-flex flex-column" style="height: 100vh;">
       <v-toolbar dark color="primary">
         <v-btn icon dark @click="closeModal">
           <v-icon>mdi-close</v-icon>
@@ -77,7 +78,8 @@
         </v-toolbar-items>
       </v-toolbar>
 
-      <v-card-text v-if="interest">
+      <v-card-text v-if="interest" class="flex-grow-1 overflow-y-auto pa-0">
+        <div class="pa-4">
         <v-stepper
           v-show="!mobile"
           v-model="currentStep"
@@ -630,6 +632,7 @@
             @update="onInterestUpdated"
           />
         </v-form>
+        </div>
       </v-card-text>
     </v-card>
   </v-dialog>
diff --git a/pages/dashboard/interest-list.vue b/pages/dashboard/interest-list.vue
index 70783db..9454858 100644
--- a/pages/dashboard/interest-list.vue
+++ b/pages/dashboard/interest-list.vue
@@ -2,22 +2,23 @@
   <div>
     <v-container fluid>
       <!-- Header Section -->
-      <v-row class="mb-6">
+      <v-row class="mb-4 mb-md-6">
         <v-col cols="12" md="8">
-          <h1 class="text-h4 font-weight-bold mb-2">
+          <h1 class="text-h5 text-md-h4 font-weight-bold mb-1 mb-md-2">
             Port Nimara Berth Interests
           </h1>
-          <p class="text-subtitle-1 text-grey-darken-1">
+          <p class="text-body-2 text-md-subtitle-1 text-grey-darken-1">
             Manage and track all potential client interests
           </p>
         </v-col>
-        <v-col cols="12" md="4" class="d-flex justify-end align-center">
+        <v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-center mt-2 mt-md-0">
           <v-btn
             color="primary"
-            size="large"
+            :size="mobile ? 'default' : 'large'"
             @click="showCreateModal = true"
             prepend-icon="mdi-plus"
             variant="tonal"
+            :block="mobile"
           >
             Add Interest
           </v-btn>
@@ -26,14 +27,14 @@
 
       <!-- Search and Filters Section -->
       <v-row class="mb-4">
-        <v-col cols="12" md="6">
+        <v-col cols="12" :md="mobile ? 12 : 6" class="mb-2 mb-md-0">
           <v-text-field
             v-model="search"
             label="Search interests..."
             placeholder="Search by name, yacht, email, phone..."
             prepend-inner-icon="mdi-magnify"
             variant="outlined"
-            density="comfortable"
+            :density="mobile ? 'compact' : 'comfortable'"
             clearable
             hide-details
             class="search-field"
@@ -42,65 +43,78 @@
               <v-fade-transition>
                 <v-chip
                   v-if="filteredInterests.length !== interests?.list?.length"
-                  size="small"
+                  size="x-small"
                   color="primary"
                   variant="tonal"
                 >
-                  {{ filteredInterests.length }} results
+                  {{ filteredInterests.length }}
                 </v-chip>
               </v-fade-transition>
             </template>
           </v-text-field>
         </v-col>
-        <v-col cols="12" md="6" class="d-flex justify-end align-center gap-2">
-          <v-btn
-            v-if="hasActiveFilters"
-            variant="text"
-            color="primary"
-            size="small"
-            @click="clearAllFilters"
-            prepend-icon="mdi-filter-off"
-          >
-            Clear Filters
-          </v-btn>
-          <v-chip-group
-            v-model="selectedSalesLevel"
-            selected-class="text-primary"
-            column
-          >
-            <v-chip
-              filter
-              variant="outlined"
+        <v-col cols="12" :md="mobile ? 12 : 6">
+          <div class="d-flex flex-wrap align-center" :class="mobile ? 'justify-start' : 'justify-end'">
+            <v-btn
+              v-if="hasActiveFilters && mobile"
+              variant="text"
+              color="primary"
+              size="x-small"
+              @click="clearAllFilters"
+              icon="mdi-filter-off"
+              class="mr-2"
+            />
+            <v-btn
+              v-if="hasActiveFilters && !mobile"
+              variant="text"
+              color="primary"
               size="small"
-              value="all"
+              @click="clearAllFilters"
+              prepend-icon="mdi-filter-off"
+              class="mr-2"
             >
-              All Levels
-            </v-chip>
-            <v-chip
-              filter
-              variant="outlined"
-              size="small"
-              value="qualified"
+              Clear Filters
+            </v-btn>
+            <v-chip-group
+              v-model="selectedSalesLevel"
+              selected-class="text-primary"
+              :column="false"
+              mandatory
             >
-              Qualified
-            </v-chip>
-            <v-chip
-              filter
-              variant="outlined"
-              size="small"
-              value="loi"
-            >
-              LOI Sent
-            </v-chip>
-            <v-chip
-              filter
-              variant="outlined"
-              size="small"
-              value="reserved"
-            >
-              Reserved
-            </v-chip>
-          </v-chip-group>
+              <v-chip
+                filter
+                variant="outlined"
+                :size="mobile ? 'x-small' : 'small'"
+                value="all"
+              >
+                All
+              </v-chip>
+              <v-chip
+                filter
+                variant="outlined"
+                :size="mobile ? 'x-small' : 'small'"
+                value="qualified"
+              >
+                Qualified
+              </v-chip>
+              <v-chip
+                filter
+                variant="outlined"
+                :size="mobile ? 'x-small' : 'small'"
+                value="loi"
+              >
+                LOI
+              </v-chip>
+              <v-chip
+                filter
+                variant="outlined"
+                :size="mobile ? 'x-small' : 'small'"
+                value="reserved"
+              >
+                Reserved
+              </v-chip>
+            </v-chip-group>
+          </div>
         </v-col>
       </v-row>
 
@@ -122,21 +136,21 @@
           >
           <template #item="{ item }">
             <tr @click="handleRowClick(item)" class="table-row">
-              <td>
+              <td class="contact-cell">
                 <div class="d-flex align-center">
-                  <v-avatar size="32" color="primary" class="mr-3">
+                  <v-avatar :size="mobile ? 28 : 32" color="primary" :class="mobile ? 'mr-2' : 'mr-3'">
                     <span class="text-white text-caption font-weight-bold">
                       {{ getInitials(item["Full Name"]) }}
                     </span>
                   </v-avatar>
-                  <div class="flex-grow-1">
-                    <div class="d-flex align-center gap-2">
-                      <span class="font-weight-medium">{{ item["Full Name"] }}</span>
+                  <div class="flex-grow-1 min-width-0">
+                    <div class="d-flex align-center gap-1">
+                      <span class="font-weight-medium text-truncate">{{ item["Full Name"] }}</span>
                       <v-tooltip v-if="item['Extra Comments']" location="bottom">
                         <template #activator="{ props }">
                           <v-icon
                             v-bind="props"
-                            size="small"
+                            :size="mobile ? 'x-small' : 'small'"
                             color="orange"
                           >
                             mdi-comment-text
@@ -145,7 +159,7 @@
                         <span>{{ item["Extra Comments"] }}</span>
                       </v-tooltip>
                     </div>
-                    <div class="text-caption text-grey-darken-1">{{ item["Email Address"] }}</div>
+                    <div class="text-caption text-grey-darken-1 text-truncate">{{ item["Email Address"] }}</div>
                   </div>
                 </div>
               </td>
@@ -214,6 +228,7 @@ useHead({
   title: "Interest List",
 });
 
+const { mobile } = useDisplay();
 const user = useDirectusUser();
 const router = useRouter();
 const loading = ref(true);
@@ -256,14 +271,23 @@ const handleInterestCreated = async (interest: Interest) => {
   loading.value = false;
 };
 
-const headers = [
-  { title: "Contact", key: "Full Name", sortable: true, width: "25%" },
-  { title: "Sales Status", key: "Sales Process Level", sortable: true },
-  { title: "EOI Status", key: "EOI Status", sortable: true },
-  { title: "Contract", key: "Contract Status", sortable: true },
-  { title: "Category", key: "Lead Category", sortable: true },
-  { title: "Created", key: "Created At", sortable: true },
-];
+const headers = computed(() => {
+  if (mobile) {
+    return [
+      { title: "Contact", key: "Full Name", sortable: true },
+      { title: "Status", key: "Sales Process Level", sortable: true },
+      { title: "Created", key: "Created At", sortable: true },
+    ];
+  }
+  return [
+    { title: "Contact", key: "Full Name", sortable: true, width: "25%" },
+    { title: "Sales Status", key: "Sales Process Level", sortable: true },
+    { title: "EOI Status", key: "EOI Status", sortable: true },
+    { title: "Contract", key: "Contract Status", sortable: true },
+    { title: "Category", key: "Lead Category", sortable: true },
+    { title: "Created", key: "Created At", sortable: true },
+  ];
+});
 
 // Check if any filters are active
 const hasActiveFilters = computed(() => {
@@ -525,53 +549,95 @@ const getRelativeTime = (dateString: string) => {
   transform: translateZ(0);
 }
 
-/* Column width constraints */
-.modern-table :deep(th:nth-child(1)),
-.modern-table :deep(td:nth-child(1)) {
-  min-width: 250px;
-}
-
-.modern-table :deep(th:nth-child(2)),
-.modern-table :deep(td:nth-child(2)) {
-  min-width: 150px;
-}
-
-.modern-table :deep(th:nth-child(3)),
-.modern-table :deep(td:nth-child(3)) {
-  min-width: 120px;
-}
-
-.modern-table :deep(th:nth-child(4)),
-.modern-table :deep(td:nth-child(4)) {
-  min-width: 120px;
-}
-
-.modern-table :deep(th:nth-child(5)),
-.modern-table :deep(td:nth-child(5)) {
-  min-width: 120px;
-}
-
-.modern-table :deep(th:nth-child(6)),
-.modern-table :deep(td:nth-child(6)) {
-  min-width: 140px;
+/* Responsive column widths */
+@media (min-width: 769px) {
+  .modern-table :deep(th:nth-child(1)),
+  .modern-table :deep(td:nth-child(1)) {
+    min-width: 250px;
+  }
+
+  .modern-table :deep(th:nth-child(2)),
+  .modern-table :deep(td:nth-child(2)) {
+    min-width: 150px;
+  }
+
+  .modern-table :deep(th:nth-child(3)),
+  .modern-table :deep(td:nth-child(3)) {
+    min-width: 120px;
+  }
+
+  .modern-table :deep(th:nth-child(4)),
+  .modern-table :deep(td:nth-child(4)) {
+    min-width: 120px;
+  }
+
+  .modern-table :deep(th:nth-child(5)),
+  .modern-table :deep(td:nth-child(5)) {
+    min-width: 120px;
+  }
+
+  .modern-table :deep(th:nth-child(6)),
+  .modern-table :deep(td:nth-child(6)) {
+    min-width: 140px;
+  }
 }
 
+/* Mobile-specific styles */
 @media (max-width: 768px) {
   .table-container {
     margin: 0 -12px;
     padding: 0 12px;
   }
   
+  /* For mobile, only show essential columns */
   .modern-table :deep(.v-table__wrapper) {
-    min-width: 900px;
+    min-width: auto;
   }
   
   .modern-table :deep(th) {
-    white-space: nowrap;
+    padding: 8px !important;
+    font-size: 0.75rem;
   }
   
   .modern-table :deep(td) {
-    white-space: nowrap;
+    padding: 12px 8px !important;
+  }
+  
+  /* Hide columns on mobile that aren't in mobile headers */
+  .modern-table :deep(th:nth-child(n+4)),
+  .modern-table :deep(td:nth-child(n+4)) {
+    display: none;
+  }
+  
+  /* Contact cell optimization */
+  .contact-cell {
+    max-width: 200px;
+  }
+  
+  .contact-cell .text-truncate {
+    max-width: 150px;
+  }
+  
+  /* Adjust table row height on mobile */
+  .table-row td {
+    padding: 12px 8px !important;
+  }
+  
+  /* Ensure badges are sized appropriately */
+  .modern-table :deep(.v-chip) {
+    height: 20px !important;
+    font-size: 0.625rem !important;
   }
 }
+
+/* Ensure proper text truncation */
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.min-width-0 {
+  min-width: 0;
+}
 </style>