@@ -147,6 +153,7 @@ const emit = defineEmits<{
const user = useDirectusUser();
const toast = useToast();
+const { mobile } = useDisplay();
const loading = ref(false);
const threads = ref([]);
@@ -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;
+}
diff --git a/components/InterestDetailsModal.vue b/components/InterestDetailsModal.vue
index 2155b74..ebf1ea0 100644
--- a/components/InterestDetailsModal.vue
+++ b/components/InterestDetailsModal.vue
@@ -194,14 +194,35 @@
Request Info
-
+
+
+ mdi-delete
+ Delete
+
+
+
diff --git a/pages/dashboard/interest-list.vue b/pages/dashboard/interest-list.vue
index bcbcbbe..73695fe 100644
--- a/pages/dashboard/interest-list.vue
+++ b/pages/dashboard/interest-list.vue
@@ -588,58 +588,78 @@ const getRelativeTime = (dateString: string) => {
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
- /* Remove negative margins to prevent cutoff */
+ margin: 0 -16px; /* Extend to screen edge */
+ padding: 0 16px; /* Add padding back */
}
/* Add padding to the wrapper instead */
.modern-table :deep(.v-table__wrapper) {
- min-width: 600px; /* Minimum width to ensure scrolling */
+ min-width: 400px; /* Reduced minimum width for mobile */
}
.modern-table :deep(th) {
- padding: 8px !important;
+ padding: 8px 4px !important;
font-size: 0.75rem;
white-space: nowrap;
}
.modern-table :deep(td) {
- padding: 12px 8px !important;
+ padding: 12px 4px !important;
+ vertical-align: middle;
}
- /* Show all columns but with smaller widths on mobile */
+ /* Optimize mobile column widths to fit better */
.modern-table :deep(th:nth-child(1)),
.modern-table :deep(td:nth-child(1)) {
- min-width: 180px !important;
+ min-width: 220px !important; /* Contact info needs more space */
+ max-width: 220px !important;
}
.modern-table :deep(th:nth-child(2)),
.modern-table :deep(td:nth-child(2)) {
- min-width: 120px !important;
+ min-width: 100px !important;
+ max-width: 100px !important;
}
.modern-table :deep(th:nth-child(3)),
.modern-table :deep(td:nth-child(3)) {
- min-width: 100px !important;
+ min-width: 80px !important;
+ max-width: 80px !important;
}
/* Contact cell optimization */
.contact-cell {
- max-width: 180px;
+ max-width: 220px;
+ padding: 8px 4px !important;
}
.contact-cell .text-truncate {
- max-width: 140px;
+ max-width: 160px;
+ }
+
+ .contact-cell .v-avatar {
+ margin-right: 8px !important;
+ flex-shrink: 0;
}
/* Adjust table row height on mobile */
.table-row td {
- padding: 12px 8px !important;
+ padding: 8px 4px !important;
+ height: auto !important;
+ min-height: 60px;
}
/* Ensure badges are sized appropriately */
.modern-table :deep(.v-chip) {
- height: 20px !important;
+ height: 18px !important;
font-size: 0.625rem !important;
+ padding: 0 6px !important;
+ }
+
+ /* Style the date column to be more compact */
+ .modern-table :deep(td:nth-child(3) .text-caption) {
+ font-size: 0.6rem !important;
+ line-height: 1.2;
}
/* Add visual scroll indicators */
@@ -647,11 +667,28 @@ const getRelativeTime = (dateString: string) => {
content: '';
position: absolute;
top: 0;
- right: 0;
+ right: 16px;
bottom: 0;
- width: 30px;
- background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
+ width: 20px;
+ background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
pointer-events: none;
+ z-index: 1;
+ }
+
+ /* Fix container padding */
+ .v-container {
+ padding: 12px 16px !important;
+ }
+
+ /* Improve mobile row layout */
+ .modern-table :deep(tbody tr) {
+ height: auto !important;
+ }
+
+ /* Better text overflow handling */
+ .modern-table :deep(td) {
+ word-break: break-word;
+ overflow-wrap: break-word;
}
}