From fe90bd63c31de9f37f462ea0dc2a36c7b99ec721 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Wed, 4 Jun 2025 01:40:13 +0200
Subject: [PATCH] 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         |  8 +----
 pages/dashboard/interest-list.vue | 55 +++++++++++++++++++++++--------
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/pages/dashboard/index.vue b/pages/dashboard/index.vue
index 0586111..f86645d 100644
--- a/pages/dashboard/index.vue
+++ b/pages/dashboard/index.vue
@@ -1,9 +1,3 @@
 <script lang="ts" setup>
-const tags = usePortalTags();
-
-onBeforeMount(() =>
-  navigateTo(
-    toValue(tags).interest ? "/dashboard/interest-analytics" : "/dashboard/site"
-  )
-);
+onBeforeMount(() => navigateTo("/dashboard/interest-list"));
 </script>
diff --git a/pages/dashboard/interest-list.vue b/pages/dashboard/interest-list.vue
index c343fad..17d2239 100644
--- a/pages/dashboard/interest-list.vue
+++ b/pages/dashboard/interest-list.vue
@@ -97,19 +97,20 @@
 
       <!-- Data Table -->
       <v-card elevation="0" class="rounded-lg">
-        <v-data-table
-          :headers="headers"
-          :items="filteredInterests"
-          :search="search"
-          :sort-by="[{ key: 'Created At', order: 'desc' }, { key: 'Full Name', order: 'asc' }]"
-          must-sort
-          hover
-          :loading="loading"
-          loading-text="Loading interests..."
-          :items-per-page="50"
-          :items-per-page-options="[10, 20, 50, 100]"
-          class="modern-table"
-        >
+        <div class="table-container">
+          <v-data-table
+            :headers="headers"
+            :items="filteredInterests"
+            :search="search"
+            :sort-by="[{ key: 'Created At', order: 'desc' }, { key: 'Full Name', order: 'asc' }]"
+            must-sort
+            hover
+            :loading="loading"
+            loading-text="Loading interests..."
+            :items-per-page="50"
+            :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>