@escalated-dev/escalated 0.11.7 → 0.11.9

package/src/components/admin/newsletters/DeliveriesTable.vue

@@ -11,33 +11,35 @@
             </select>
             <button type="button" class="deliveries-table__export" @click="$emit('export')">Export CSV</button>
         </div>
-        <table>
-            <thead>
-                <tr>
-                    <th>Contact</th>
-                    <th>Status</th>
-                    <th>Sent</th>
-                    <th>Opened</th>
-                    <th>Last clicked</th>
-                    <th>Bounce reason</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="row in rows" :key="row.id">
-                    <td>
-                        <div>{{ row.contact.name ?? '—' }}</div>
-                        <div class="deliveries-table__email">{{ row.contact.email }}</div>
-                    </td>
-                    <td>
-                        <span :class="`status status--${row.status}`">{{ row.status }}</span>
-                    </td>
-                    <td>{{ row.sent_at ? new Date(row.sent_at).toLocaleString() : '—' }}</td>
-                    <td>{{ row.opened_at ? new Date(row.opened_at).toLocaleString() : '—' }}</td>
-                    <td>{{ row.last_clicked_at ? new Date(row.last_clicked_at).toLocaleString() : '—' }}</td>
-                    <td>{{ row.bounce_reason ?? '—' }}</td>
-                </tr>
-            </tbody>
-        </table>
+        <div class="esc-table-scroll">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Contact</th>
+                        <th>Status</th>
+                        <th>Sent</th>
+                        <th>Opened</th>
+                        <th>Last clicked</th>
+                        <th>Bounce reason</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="row in rows" :key="row.id">
+                        <td>
+                            <div>{{ row.contact.name ?? '—' }}</div>
+                            <div class="deliveries-table__email">{{ row.contact.email }}</div>
+                        </td>
+                        <td>
+                            <span :class="`status status--${row.status}`">{{ row.status }}</span>
+                        </td>
+                        <td>{{ row.sent_at ? new Date(row.sent_at).toLocaleString() : '—' }}</td>
+                        <td>{{ row.opened_at ? new Date(row.opened_at).toLocaleString() : '—' }}</td>
+                        <td>{{ row.last_clicked_at ? new Date(row.last_clicked_at).toLocaleString() : '—' }}</td>
+                        <td>{{ row.bounce_reason ?? '—' }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 </template>
 

package/src/components/admin/newsletters/ListMemberTable.vue

@@ -1,32 +1,34 @@
 <template>
-    <table class="list-member-table">
-        <thead>
-            <tr>
-                <th>Contact</th>
-                <th>Added</th>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="m in members" :key="m.id">
-                <td>
-                    <div>{{ m.contact.name ?? '—' }}</div>
-                    <div class="list-member-table__email">{{ m.contact.email }}</div>
-                </td>
-                <td>{{ new Date(m.added_at).toLocaleDateString() }}</td>
-                <td>
-                    <button
-                        type="button"
-                        data-action="remove"
-                        :data-contact-id="m.contact.id"
-                        @click="$emit('remove', m.contact.id)"
-                    >
-                        Remove
-                    </button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="esc-table-scroll">
+        <table class="list-member-table">
+            <thead>
+                <tr>
+                    <th>Contact</th>
+                    <th>Added</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="m in members" :key="m.id">
+                    <td>
+                        <div>{{ m.contact.name ?? '—' }}</div>
+                        <div class="list-member-table__email">{{ m.contact.email }}</div>
+                    </td>
+                    <td>{{ new Date(m.added_at).toLocaleDateString() }}</td>
+                    <td>
+                        <button
+                            type="button"
+                            data-action="remove"
+                            :data-contact-id="m.contact.id"
+                            @click="$emit('remove', m.contact.id)"
+                        >
+                            Remove
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
 <script setup>

package/src/pages/Admin/ApiTokens/Index.vue

@@ -287,7 +287,7 @@ function formatDate(iso) {
             <!-- Tokens table -->
             <div
                 :class="dark ? 'border-[var(--esc-panel-border)]' : 'border-gray-200'"
-                class="overflow-hidden rounded-lg border"
+                class="esc-table-scroll rounded-lg border"
             >
                 <table class="w-full text-sm">
                     <thead

package/src/pages/Admin/Automations/Form.vue

@@ -156,7 +156,11 @@ function submit() {
                     </button>
                 </div>
 
-                <div v-for="(condition, i) in form.conditions" :key="`condition-${i}`" class="mb-2 flex gap-2">
+                <div
+                    v-for="(condition, i) in form.conditions"
+                    :key="`condition-${i}`"
+                    class="mb-2 flex flex-col gap-2 sm:flex-row"
+                >
                     <select
                         v-model="condition.field"
                         :aria-label="`Condition ${i + 1} field`"
@@ -227,7 +231,11 @@ function submit() {
                     </button>
                 </div>
 
-                <div v-for="(action, i) in form.actions" :key="`action-${i}`" class="mb-2 flex gap-2">
+                <div
+                    v-for="(action, i) in form.actions"
+                    :key="`action-${i}`"
+                    class="mb-2 flex flex-col gap-2 sm:flex-row"
+                >
                     <select
                         v-model="action.type"
                         :aria-label="`Action ${i + 1} type`"

package/src/pages/Admin/Automations/Index.vue

@@ -93,7 +93,7 @@ function actionSummary(action) {
             </Link>
         </div>
 
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
             <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
                 <thead>
                     <tr class="bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/BusinessHours/Index.vue

@@ -21,7 +21,7 @@ function destroy(id) {
                 Add Schedule
             </Link>
         </div>
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
             <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
                 <thead>
                     <tr class="bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/Capacity/Index.vue

@@ -26,7 +26,7 @@ function saveEdit(id) {
 
 <template>
     <EscalatedLayout title="Agent Capacity">
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
             <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
                 <thead>
                     <tr class="bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/CustomFields/Index.vue

@@ -31,7 +31,7 @@ function destroy(id) {
                 Add Field
             </Link>
         </div>
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
             <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
                 <thead>
                     <tr class="bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/CustomObjects/Index.vue

@@ -31,7 +31,7 @@ function deleteObject(obj) {
             </Link>
         </div>
 
-        <div v-if="objects.length" class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+        <div v-if="objects.length" class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)]">
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/CustomObjects/Records.vue

@@ -12,20 +12,27 @@ const fields = computed(() => props.object.fields_schema || []);
 const editingId = ref(null);
 const showAddForm = ref(false);
 
+// The record's field values travel as `data`, which is what every backend
+// validates. They cannot live under that name on the form itself: `data()` is
+// one of useForm's own methods, Inertia refuses the field (and logs an error),
+// and assigning to it replaced the method the form submits with. They are kept
+// as `values` and renamed on the way out.
+const toRecordBody = (form) => ({ data: form.values });
+
 const newRecordForm = useForm({
-    data: {},
-});
+    values: {},
+}).transform(toRecordBody);
 
 const editForm = useForm({
-    data: {},
-});
+    values: {},
+}).transform(toRecordBody);
 
 function startAdd() {
     const data = {};
     fields.value.forEach((f) => {
         data[f.name] = '';
     });
-    newRecordForm.data = data;
+    newRecordForm.values = data;
     showAddForm.value = true;
 }
 
@@ -41,7 +48,7 @@ function addRecord() {
 
 function startEdit(record) {
     editingId.value = record.id;
-    editForm.data = { ...(record.data || {}) };
+    editForm.values = { ...(record.data || {}) };
 }
 
 function saveEdit(record) {
@@ -96,7 +103,7 @@ function deleteRecord(record) {
                     </label>
                     <select
                         v-if="field.type === 'select'"
-                        v-model="newRecordForm.data[field.name]"
+                        v-model="newRecordForm.values[field.name]"
                         class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
                     >
                         <option value="">Select...</option>
@@ -104,19 +111,19 @@ function deleteRecord(record) {
                     </select>
                     <input
                         v-else-if="field.type === 'date'"
-                        v-model="newRecordForm.data[field.name]"
+                        v-model="newRecordForm.values[field.name]"
                         type="date"
                         class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
                     />
                     <input
                         v-else-if="field.type === 'number'"
-                        v-model="newRecordForm.data[field.name]"
+                        v-model="newRecordForm.values[field.name]"
                         type="number"
                         class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
                     />
                     <input
                         v-else
-                        v-model="newRecordForm.data[field.name]"
+                        v-model="newRecordForm.values[field.name]"
                         type="text"
                         class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
                     />
@@ -141,7 +148,7 @@ function deleteRecord(record) {
         </div>
 
         <!-- Records Table -->
-        <div v-if="records.length" class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+        <div v-if="records.length" class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)]">
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">
@@ -171,7 +178,7 @@ function deleteRecord(record) {
                             <!-- Edit mode -->
                             <template v-if="editingId === record.id">
                                 <input
-                                    v-model="editForm.data[field.name]"
+                                    v-model="editForm.values[field.name]"
                                     :type="field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'"
                                     class="w-full rounded border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] px-2 py-1 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
                                 />

package/src/pages/Admin/Departments/Index.vue

@@ -21,7 +21,7 @@ function destroy(id) {
                 Add Department
             </Link>
         </div>
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
             <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
                 <thead>
                     <tr class="bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/EscalationRules/Index.vue

@@ -107,7 +107,7 @@ function toggleCategory(cat) {
 
             <div
                 v-if="!collapsedCategories[category]"
-                class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]"
+                class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]"
             >
                 <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
                     <thead>

package/src/pages/Admin/Import/Index.vue

@@ -60,7 +60,7 @@ const statusColors = {
         <!-- Import history -->
         <div v-if="jobs.length">
             <h3 class="mb-3 text-sm font-semibold text-[var(--esc-panel-text)]">Import History</h3>
-            <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+            <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)]">
                 <table class="w-full text-sm">
                     <thead class="bg-[var(--esc-panel-surface-alt)]">
                         <tr>

package/src/pages/Admin/KnowledgeBase/Articles/Index.vue

@@ -46,8 +46,8 @@ const statusColors = {
 
 <template>
     <EscalatedLayout title="Knowledge Base — Articles">
-        <div class="mb-6 flex items-center justify-between">
-            <div class="flex items-center gap-3">
+        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
+            <div class="flex flex-wrap items-center gap-3">
                 <input
                     v-model="search"
                     type="text"
@@ -78,7 +78,7 @@ const statusColors = {
             </Link>
         </div>
 
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)]">
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/Macros/Index.vue

@@ -339,7 +339,7 @@ const selectClass =
         </form>
 
         <!-- Macros table -->
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
             <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
                 <thead>
                     <tr class="bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/Newsletters/Index.vue

@@ -17,35 +17,37 @@
                     {{ $t(`newsletters.index.tabs.${tabItem.key}`) }}
                 </Link>
             </nav>
-            <table>
-                <thead>
-                    <tr>
-                        <th>{{ $t('newsletters.index.columns.subject') }}</th>
-                        <th>{{ $t('newsletters.index.columns.list') }}</th>
-                        <th>{{ $t('newsletters.index.columns.status') }}</th>
-                        <th>{{ $t('newsletters.index.columns.scheduled') }}</th>
-                        <th>{{ $t('newsletters.index.columns.sent') }}</th>
-                        <th>{{ $t('newsletters.index.columns.recipients') }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-if="!filtered.length">
-                        <td colspan="6" class="empty">{{ emptyMessage }}</td>
-                    </tr>
-                    <tr v-for="n in filtered" :key="n.id">
-                        <td>
-                            <Link :href="`/admin/newsletters/${n.id}`">{{ n.subject }}</Link>
-                        </td>
-                        <td>{{ n.target_list.name }}</td>
-                        <td>
-                            <span :class="`status status--${n.status}`">{{ n.status }}</span>
-                        </td>
-                        <td>{{ n.scheduled_at ? new Date(n.scheduled_at).toLocaleString() : '—' }}</td>
-                        <td>{{ n.sent_at ? new Date(n.sent_at).toLocaleString() : '—' }}</td>
-                        <td>{{ n.summary_total ?? '—' }}</td>
-                    </tr>
-                </tbody>
-            </table>
+            <div class="esc-table-scroll">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>{{ $t('newsletters.index.columns.subject') }}</th>
+                            <th>{{ $t('newsletters.index.columns.list') }}</th>
+                            <th>{{ $t('newsletters.index.columns.status') }}</th>
+                            <th>{{ $t('newsletters.index.columns.scheduled') }}</th>
+                            <th>{{ $t('newsletters.index.columns.sent') }}</th>
+                            <th>{{ $t('newsletters.index.columns.recipients') }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-if="!filtered.length">
+                            <td colspan="6" class="empty">{{ emptyMessage }}</td>
+                        </tr>
+                        <tr v-for="n in filtered" :key="n.id">
+                            <td>
+                                <Link :href="`/admin/newsletters/${n.id}`">{{ n.subject }}</Link>
+                            </td>
+                            <td>{{ n.target_list.name }}</td>
+                            <td>
+                                <span :class="`status status--${n.status}`">{{ n.status }}</span>
+                            </td>
+                            <td>{{ n.scheduled_at ? new Date(n.scheduled_at).toLocaleString() : '—' }}</td>
+                            <td>{{ n.sent_at ? new Date(n.sent_at).toLocaleString() : '—' }}</td>
+                            <td>{{ n.summary_total ?? '—' }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </EscalatedLayout>
 </template>

package/src/pages/Admin/Newsletters/Lists/Index.vue

@@ -7,26 +7,28 @@
                     {{ $t('newsletters.lists.new') }}
                 </Link>
             </header>
-            <table>
-                <thead>
-                    <tr>
-                        <th>{{ $t('newsletters.lists.columns.name') }}</th>
-                        <th>{{ $t('newsletters.lists.columns.kind') }}</th>
-                        <th>{{ $t('newsletters.lists.columns.members') }}</th>
-                        <th>{{ $t('newsletters.lists.columns.opted_out') }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="l in lists" :key="l.id">
-                        <td>
-                            <Link :href="`/admin/newsletters/lists/${l.id}`">{{ l.name }}</Link>
-                        </td>
-                        <td>{{ l.kind }}</td>
-                        <td>{{ l.member_count }}</td>
-                        <td>{{ l.opted_out_count }}</td>
-                    </tr>
-                </tbody>
-            </table>
+            <div class="esc-table-scroll">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>{{ $t('newsletters.lists.columns.name') }}</th>
+                            <th>{{ $t('newsletters.lists.columns.kind') }}</th>
+                            <th>{{ $t('newsletters.lists.columns.members') }}</th>
+                            <th>{{ $t('newsletters.lists.columns.opted_out') }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="l in lists" :key="l.id">
+                            <td>
+                                <Link :href="`/admin/newsletters/lists/${l.id}`">{{ l.name }}</Link>
+                            </td>
+                            <td>{{ l.kind }}</td>
+                            <td>{{ l.member_count }}</td>
+                            <td>{{ l.opted_out_count }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </EscalatedLayout>
 </template>

package/src/pages/Admin/Reports/AgentMetrics.vue

@@ -40,7 +40,7 @@ function changePeriod(days) {
         </div>
 
         <!-- Agent Table -->
-        <div class="mb-8 overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+        <div class="mb-8 esc-table-scroll rounded-xl border border-[var(--esc-panel-border)]">
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/Reports/AgentRanking.vue

@@ -67,9 +67,9 @@ function renderSparkline(points) {
 
 <template>
     <EscalatedLayout title="Agent Performance Rankings">
-        <div class="mb-6 flex items-center justify-between">
+        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
             <PeriodSelector :model-value="periodDays" @update:model-value="changePeriod" />
-            <div class="flex items-center gap-3">
+            <div class="flex flex-wrap items-center gap-3">
                 <ReportExportButton report-name="agent-ranking" :period-days="periodDays" />
                 <Link
                     :href="route('escalated.admin.reports')"
@@ -141,7 +141,7 @@ function renderSparkline(points) {
         </div>
 
         <!-- Ranked Table -->
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)]">
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/Reports/Cohorts.vue

@@ -73,9 +73,9 @@ function toggleSort(col) {
 
 <template>
     <EscalatedLayout title="Cohort Analysis">
-        <div class="mb-6 flex items-center justify-between">
+        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
             <PeriodSelector :model-value="periodDays" @update:model-value="changePeriod" />
-            <div class="flex items-center gap-3">
+            <div class="flex flex-wrap items-center gap-3">
                 <ReportExportButton report-name="cohorts" :period-days="periodDays" />
                 <Link
                     :href="route('escalated.admin.reports')"
@@ -87,12 +87,14 @@ function toggleSort(col) {
         </div>
 
         <!-- Tab Selector -->
-        <div class="mb-6 flex gap-1 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] p-1">
+        <div
+            class="mb-6 flex gap-1 overflow-x-auto rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] p-1"
+        >
             <button
                 v-for="tab in tabs"
                 :key="tab.key"
                 :class="[
-                    'rounded-md px-4 py-2 text-sm font-medium transition-all',
+                    'shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-all',
                     activeTab === tab.key
                         ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-text)]'
                         : 'text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]',
@@ -114,7 +116,7 @@ function toggleSort(col) {
         </div>
 
         <!-- Cohort Table -->
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+        <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)]">
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">

package/src/pages/Admin/Reports/Comparison.vue

@@ -61,9 +61,9 @@ const overlayPreviousData = computed(() => {
 
 <template>
     <EscalatedLayout title="Period Comparison">
-        <div class="mb-6 flex items-center justify-between">
+        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
             <PeriodSelector :model-value="periodDays" @update:model-value="changePeriod" />
-            <div class="flex items-center gap-3">
+            <div class="flex flex-wrap items-center gap-3">
                 <ReportExportButton report-name="comparison" :period-days="periodDays" />
                 <Link
                     :href="route('escalated.admin.reports')"
@@ -75,7 +75,7 @@ const overlayPreviousData = computed(() => {
         </div>
 
         <!-- Period Labels -->
-        <div class="mb-6 flex items-center gap-4">
+        <div class="mb-6 flex flex-wrap items-center gap-4">
             <div class="flex items-center gap-2">
                 <span class="inline-block h-3 w-3 rounded-full bg-cyan-500"></span>
                 <span class="text-sm font-medium text-[var(--esc-panel-text-secondary)]"

package/src/pages/Admin/Reports/Dashboard.vue

@@ -45,9 +45,9 @@ function changePeriod(days) {
 <template>
     <EscalatedLayout title="Reports Dashboard">
         <!-- Period selector & export -->
-        <div class="mb-6 flex items-center justify-between">
+        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
             <PeriodSelector :model-value="period_days" @update:model-value="changePeriod" />
-            <div class="flex items-center gap-3">
+            <div class="flex flex-wrap items-center gap-3">
                 <ReportExportButton report-name="dashboard" :period-days="period_days" />
                 <Link
                     :href="route('escalated.admin.reports')"
@@ -59,12 +59,14 @@ function changePeriod(days) {
         </div>
 
         <!-- Tabs -->
-        <div class="mb-6 flex gap-1 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] p-1">
+        <div
+            class="mb-6 flex gap-1 overflow-x-auto rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] p-1"
+        >
             <button
                 v-for="tab in tabs"
                 :key="tab.key"
                 :class="[
-                    'rounded-md px-4 py-2 text-sm font-medium transition-all',
+                    'shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-all',
                     activeTab === tab.key
                         ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-text)]'
                         : 'text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]',
@@ -119,7 +121,7 @@ function changePeriod(days) {
                     Full Agent Report &rarr;
                 </Link>
             </div>
-            <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+            <div class="esc-table-scroll rounded-xl border border-[var(--esc-panel-border)]">
                 <table class="w-full">
                     <thead>
                         <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">