feat: Add mobile responsiveness to interest list table and simplify dashboard routing

- Change dashboard default route to always navigate to interest-list page
- Add horizontal scrolling for data table on mobile devices
- Implement responsive table styles with min-width and no-wrap for better mobile UX
- Remove conditional navigation logic based on portal tags

pages/dashboard/index.vue

@@ -1,9 +1,3 @@
 <script lang="ts" setup>
-const tags = usePortalTags();
+onBeforeMount(() => navigateTo("/dashboard/interest-list"));
-
-onBeforeMount(() =>
-  navigateTo(
-    toValue(tags).interest ? "/dashboard/interest-analytics" : "/dashboard/site"
-  )
-);
 </script>

pages/dashboard/interest-list.vue

@@ -97,19 +97,20 @@
 
       <!-- Data Table -->
       <v-card elevation="0" class="rounded-lg">
-        <v-data-table
+        <div class="table-container">
-          :headers="headers"
+          <v-data-table
-          :items="filteredInterests"
+            :headers="headers"
-          :search="search"
+            :items="filteredInterests"
-          :sort-by="[{ key: 'Created At', order: 'desc' }, { key: 'Full Name', order: 'asc' }]"
+            :search="search"
-          must-sort
+            :sort-by="[{ key: 'Created At', order: 'desc' }, { key: 'Full Name', order: 'asc' }]"
-          hover
+            must-sort
-          :loading="loading"
+            hover
-          loading-text="Loading interests..."
+            :loading="loading"
-          :items-per-page="50"
+            loading-text="Loading interests..."
-          :items-per-page-options="[10, 20, 50, 100]"
+            :items-per-page="50"
-          class="modern-table"
+            :items-per-page-options="[10, 20, 50, 100]"
-        >
+            class="modern-table"
+          >
           <template #item="{ item }">
             <tr @click="handleRowClick(item)" class="table-row">
               <td>
@@ -204,7 +205,8 @@
           </template>
 
 
-        </v-data-table>
+          </v-data-table>
+        </div>
       </v-card>
     </v-container>
 
@@ -472,4 +474,29 @@ const getRelativeTime = (dateString: string) => {
 .v-avatar {
   font-size: 0.875rem;
 }
+
+/* Mobile horizontal scrolling */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 768px) {
+  .table-container {
+    margin: 0 -12px;
+    padding: 0 12px;
+  }
+  
+  .modern-table :deep(.v-table__wrapper) {
+    min-width: 1200px;
+  }
+  
+  .modern-table :deep(th) {
+    white-space: nowrap;
+  }
+  
+  .modern-table :deep(td) {
+    white-space: nowrap;
+  }
+}
 </style>