updates

pages/dashboard/interest-list.vue

@@ -585,37 +585,51 @@ const getRelativeTime = (dateString: string) => {
 /* Mobile-specific styles */
 @media (max-width: 768px) {
   .table-container {
-    margin: 0 -12px;
-    padding: 0 12px;
+    position: relative;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: 0 -16px;
   }
   
-  /* For mobile, only show essential columns */
+  /* Add padding to the wrapper instead */
   .modern-table :deep(.v-table__wrapper) {
-    min-width: auto;
+    padding: 0 16px;
+    min-width: 600px; /* Minimum width to ensure scrolling */
   }
   
   .modern-table :deep(th) {
     padding: 8px !important;
     font-size: 0.75rem;
+    white-space: nowrap;
   }
   
   .modern-table :deep(td) {
     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;
+  /* Show all columns but with smaller widths on mobile */
+  .modern-table :deep(th:nth-child(1)),
+  .modern-table :deep(td:nth-child(1)) {
+    min-width: 180px !important;
+  }
+  
+  .modern-table :deep(th:nth-child(2)),
+  .modern-table :deep(td:nth-child(2)) {
+    min-width: 120px !important;
+  }
+  
+  .modern-table :deep(th:nth-child(3)),
+  .modern-table :deep(td:nth-child(3)) {
+    min-width: 100px !important;
   }
   
   /* Contact cell optimization */
   .contact-cell {
-    max-width: 200px;
+    max-width: 180px;
   }
   
   .contact-cell .text-truncate {
-    max-width: 150px;
+    max-width: 140px;
   }
   
   /* Adjust table row height on mobile */
@@ -628,6 +642,18 @@ const getRelativeTime = (dateString: string) => {
     height: 20px !important;
     font-size: 0.625rem !important;
   }
+  
+  /* Add visual scroll indicators */
+  .table-container::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 30px;
+    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
+    pointer-events: none;
+  }
 }
 
 /* Ensure proper text truncation */