@escalated-dev/escalated 0.11.8 → 0.11.9

package/README.md

@@ -157,6 +157,13 @@ The `theme` option sets CSS custom properties you can reference in your own styl
 | `--esc-radius-lg` | auto-scaled | Border radius for cards and panels |
 | `--esc-font-family` | inherit | Font family override |
 
+### Admin and Agent Panels
+
+`theme.panel` colours the admin and agent panels: navigation, header, logo
+tile, links and surfaces, in dark or light mode. Both panels collapse their
+navigation behind a menu button below 1024px. See
+[docs/theming.md](docs/theming.md) for every token.
+
 ### Framework Examples
 
 **Laravel** (Inertia + Vue 3):

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escalated-dev/escalated",
-    "version": "0.11.8",
+    "version": "0.11.9",
     "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
     "author": "Escalated Dev <hello@escalated.dev>",
     "license": "MIT",

package/pages.json

@@ -1,6 +1,6 @@
 {
     "$comment": "Generated by scripts/generate-page-manifest.js from src/pages. Every name here resolves to a component; a name a backend renders that is not here is a blank screen. `props` is what each component reads -- a backend sending something else renders the screen with no content in it.",
-    "version": "0.11.8",
+    "version": "0.11.9",
     "pages": [
         "Escalated/Admin/ApiTokens/Index",
         "Escalated/Admin/AuditLog/Index",

package/src/components/AuditLogEntry.vue

@@ -46,30 +46,36 @@ const formattedDate = computed(() => {
 
 <template>
     <div
-        class="flex gap-3 rounded-lg border border-white/[0.04] bg-white/[0.02] px-4 py-3 transition-colors hover:bg-white/[0.03]"
+        class="flex gap-3 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] px-4 py-3 transition-colors hover:bg-[var(--esc-panel-hover)]"
     >
         <!-- Avatar -->
         <div
-            class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500/20 to-violet-500/20 text-xs font-semibold text-neutral-300"
+            class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500/20 to-violet-500/20 text-xs font-semibold text-[var(--esc-panel-text-tertiary)]"
         >
             {{ userInitial }}
         </div>
 
         <div class="min-w-0 flex-1">
-            <div class="flex items-center gap-2 text-sm">
-                <span class="font-medium text-neutral-200">{{ log.user?.name || 'System' }}</span>
+            <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
+                <span class="font-medium text-[var(--esc-panel-text-secondary)]">{{ log.user?.name || 'System' }}</span>
                 <span :class="['inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', actionColor]">
                     {{ log.action }}
                 </span>
-                <span class="text-neutral-400">{{ resourceName }}</span>
-                <span class="text-neutral-600">#{{ log.auditable_id }}</span>
-                <span class="ml-auto text-xs text-neutral-500">{{ formattedDate }}</span>
+                <span class="text-[var(--esc-panel-text-tertiary)]">{{ resourceName }}</span>
+                <span class="text-[var(--esc-panel-text-muted)]">#{{ log.auditable_id }}</span>
+                <span class="ml-auto whitespace-nowrap text-xs text-[var(--esc-panel-text-muted)]">{{
+                    formattedDate
+                }}</span>
             </div>
 
             <!-- Changed fields diff -->
             <div v-if="changedFields.length" class="mt-2 space-y-1">
-                <div v-for="change in changedFields" :key="change.field" class="flex items-center gap-2 text-xs">
-                    <span class="font-medium text-neutral-400">{{ change.field }}:</span>
+                <div
+                    v-for="change in changedFields"
+                    :key="change.field"
+                    class="flex flex-wrap items-center gap-2 text-xs"
+                >
+                    <span class="font-medium text-[var(--esc-panel-text-tertiary)]">{{ change.field }}:</span>
                     <span class="text-rose-400/70 line-through">{{
                         typeof change.old === 'object' ? JSON.stringify(change.old) : change.old
                     }}</span>

package/src/components/ChatQueue.vue

@@ -119,7 +119,7 @@ onMounted(() => {
         <div
             v-else
             :class="[
-                'overflow-hidden rounded-xl border',
+                'esc-table-scroll rounded-xl border',
                 escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
             ]"
         >

package/src/components/EscalatedLayout.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { computed, inject, provide } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
 import { usePage, Link } from '@inertiajs/vue3';
 import { usePluginExtensions } from '../composables/usePluginExtensions';
 import { usePermissions } from '../composables/usePermissions';
 import { useI18n } from '../composables/useI18n';
+import { watchScrollAffordance } from '../utils/scrollAffordance';
 import ActiveChatsPanel from './ActiveChatsPanel.vue';
 
 defineProps({
@@ -225,6 +226,8 @@ const agentLinks = computed(() => [
     {
         href: `${prefix.value}/agent`,
         label: 'Dashboard',
+        // Every agent URL starts with this one; only the dashboard itself is it.
+        exact: true,
         icon: 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25',
     },
     {
@@ -237,26 +240,77 @@ const agentLinks = computed(() => [
 const userName = computed(() => page.props.auth?.user?.name || 'User');
 const userInitial = computed(() => userName.value.charAt(0).toUpperCase());
 
-function isActive(href) {
+function isActive(href, exact = false) {
     if (!currentUrl.value) return false;
-    return currentUrl.value === href || currentUrl.value.startsWith(href + '/');
+    const path = currentUrl.value.split(/[?#]/)[0];
+    if (exact) return path === href;
+    return path === href || path.startsWith(href + '/');
 }
+
+// Below the `lg` breakpoint the admin sidebar and the agent nav links fold
+// away behind a menu button. It starts closed on the server and the client
+// alike, so SSR markup hydrates without a mismatch; CSS alone decides whether
+// the navigation shows at a given width.
+const navOpen = ref(false);
+function toggleNav() {
+    navOpen.value = !navOpen.value;
+}
+function closeNav() {
+    navOpen.value = false;
+}
+watch(currentUrl, closeNav);
+
+function onKeydown(event) {
+    if (event.key === 'Escape' && navOpen.value) closeNav();
+}
+
+// Tables scroll sideways inside `.esc-table-scroll`; mark the edges that have
+// more content past them so the scroll is visible before anyone tries it.
+const contentRoot = ref(null);
+let stopScrollAffordance = () => {};
+
+onMounted(() => {
+    window.addEventListener('keydown', onKeydown);
+    stopScrollAffordance = watchScrollAffordance(contentRoot.value);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onKeydown);
+    stopScrollAffordance();
+});
 </script>
 
 <template>
-    <!-- MODE 1: Admin — dark sidebar layout -->
+    <!-- MODE 1: Admin — sidebar layout; the sidebar folds into a drawer below lg -->
     <div
         v-if="isAdminSection"
         class="flex min-h-screen bg-[var(--esc-panel-bg)]"
         :style="{ colorScheme: panelConfig.mode === 'light' ? 'light' : 'dark' }"
     >
+        <!-- Drawer backdrop (narrow screens only) -->
+        <div
+            v-if="navOpen"
+            class="fixed inset-0 z-30 bg-black/40 lg:hidden"
+            aria-hidden="true"
+            data-testid="esc-nav-backdrop"
+            @click="closeNav"
+        ></div>
+
         <!-- Sidebar -->
         <aside
-            class="fixed inset-y-0 left-0 z-30 flex w-64 flex-col border-r border-[var(--esc-panel-border)] bg-[var(--esc-panel-sidebar-bg)]"
+            id="esc-admin-sidebar"
+            :class="[
+                'fixed inset-y-0 left-0 z-40 flex w-64 max-w-[85vw] flex-col border-r border-[var(--esc-panel-border)] bg-[var(--esc-panel-sidebar-bg)] transition-[transform,visibility] duration-200 lg:visible lg:translate-x-0 lg:shadow-none',
+                navOpen ? 'visible translate-x-0 shadow-2xl' : 'invisible -translate-x-full',
+            ]"
+            data-testid="esc-admin-sidebar"
         >
             <!-- Logo -->
             <div class="flex h-16 items-center gap-3 px-5">
-                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--esc-panel-border-input)]">
+                <div
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--esc-panel-logo-tile-bg,var(--esc-panel-border-input))] text-[var(--esc-panel-logo-tile-fg,var(--esc-panel-text))]"
+                    data-testid="esc-logo-tile"
+                >
                     <img
                         v-if="typeof panelConfig.logo === 'string'"
                         :src="panelConfig.logo"
@@ -288,7 +342,7 @@ function isActive(href) {
                         </g>
                     </svg>
                 </div>
-                <div>
+                <div class="min-w-0">
                     <span class="text-sm font-bold text-[var(--esc-panel-text)] tracking-wide">{{
                         panelConfig.appName
                     }}</span>
@@ -297,6 +351,17 @@ function isActive(href) {
                         >ADMIN</span
                     >
                 </div>
+                <button
+                    type="button"
+                    class="-mr-2 ml-auto rounded-lg p-2 text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text)] lg:hidden"
+                    aria-label="Close navigation"
+                    data-testid="esc-nav-close"
+                    @click="closeNav"
+                >
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
             </div>
 
             <!-- Nav -->
@@ -309,15 +374,16 @@ function isActive(href) {
                     :class="[
                         'group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-all',
                         isActive(link.href)
-                            ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-text)]'
+                            ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-active-text,var(--esc-panel-text))]'
                             : 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
                     ]"
+                    @click="closeNav"
                 >
                     <svg
                         :class="[
                             'h-[18px] w-[18px] shrink-0',
                             isActive(link.href)
-                                ? 'text-[var(--esc-panel-text)]'
+                                ? 'text-[var(--esc-panel-active-text,var(--esc-panel-text))]'
                                 : 'text-[var(--esc-panel-text-muted)] group-hover:text-[var(--esc-panel-text-tertiary)]',
                         ]"
                         fill="none"
@@ -342,7 +408,7 @@ function isActive(href) {
                 <Link
                     v-if="isAgent"
                     :href="`${prefix}/agent`"
-                    class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-[var(--esc-panel-text-muted)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+                    class="flex items-center gap-2.5 whitespace-nowrap rounded-lg px-3 py-2 text-[13px] text-[var(--esc-panel-text-muted)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
                 >
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                         <path
@@ -355,7 +421,7 @@ function isActive(href) {
                 </Link>
                 <Link
                     :href="prefix"
-                    class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-[var(--esc-panel-text-muted)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+                    class="flex items-center gap-2.5 whitespace-nowrap rounded-lg px-3 py-2 text-[13px] text-[var(--esc-panel-text-muted)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
                 >
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                         <path
@@ -370,11 +436,11 @@ function isActive(href) {
                 <!-- User -->
                 <div class="mt-2 flex items-center gap-3 rounded-lg bg-[var(--esc-panel-hover)] px-3 py-2.5">
                     <div
-                        class="flex h-7 w-7 items-center justify-center rounded-md bg-[var(--esc-panel-active)] text-xs font-semibold text-[var(--esc-panel-text-tertiary)]"
+                        class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-[var(--esc-panel-active)] text-xs font-semibold text-[var(--esc-panel-text-tertiary)]"
                     >
                         {{ userInitial }}
                     </div>
-                    <span class="text-sm text-[var(--esc-panel-text-tertiary)]">{{ userName }}</span>
+                    <span class="truncate text-sm text-[var(--esc-panel-text-tertiary)]">{{ userName }}</span>
                 </div>
             </div>
 
@@ -401,23 +467,42 @@ function isActive(href) {
         </aside>
 
         <!-- Main content -->
-        <div class="flex flex-1 flex-col pl-64">
+        <div class="flex min-w-0 flex-1 flex-col lg:pl-64">
             <!-- Top bar -->
             <header
                 role="banner"
-                class="sticky top-0 z-20 flex h-14 items-center border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-topbar-bg)] px-6 backdrop-blur-xl"
+                class="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-header-bg,var(--esc-panel-topbar-bg))] px-4 backdrop-blur-xl sm:px-6"
             >
-                <h1 class="text-sm font-semibold text-[var(--esc-panel-text)]">{{ title }}</h1>
+                <button
+                    type="button"
+                    class="-ml-2 rounded-lg p-2 text-[var(--esc-panel-header-text,var(--esc-panel-text))] hover:bg-[var(--esc-panel-hover)] lg:hidden"
+                    aria-controls="esc-admin-sidebar"
+                    :aria-expanded="navOpen ? 'true' : 'false'"
+                    aria-label="Open navigation"
+                    data-testid="esc-nav-toggle"
+                    @click="toggleNav"
+                >
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                        />
+                    </svg>
+                </button>
+                <h1 class="truncate text-sm font-semibold text-[var(--esc-panel-header-text,var(--esc-panel-text))]">
+                    {{ title }}
+                </h1>
             </header>
 
             <!-- Page content -->
-            <main role="main" class="flex-1 p-6">
+            <main ref="contentRoot" role="main" class="min-w-0 flex-1 p-4 sm:p-6">
                 <slot />
             </main>
         </div>
     </div>
 
-    <!-- MODE 2: Agent — dark top-nav layout -->
+    <!-- MODE 2: Agent — top-nav layout; the links fold behind a menu button below lg -->
     <div
         v-else-if="isAgentSection"
         class="min-h-screen bg-[var(--esc-panel-bg)]"
@@ -425,12 +510,16 @@ function isActive(href) {
     >
         <!-- Top nav -->
         <nav
-            class="sticky top-0 z-30 border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-sidebar-bg)] backdrop-blur-xl"
+            aria-label="Agent navigation"
+            class="sticky top-0 z-30 border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-header-bg,var(--esc-panel-sidebar-bg))] backdrop-blur-xl"
         >
-            <div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+            <div class="mx-auto flex h-14 max-w-7xl items-center justify-between gap-3 px-4 sm:px-6 lg:px-8">
                 <!-- Left: branding -->
-                <div class="flex items-center gap-3">
-                    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--esc-panel-border-input)]">
+                <div class="flex min-w-0 items-center gap-3">
+                    <div
+                        class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--esc-panel-logo-tile-bg,var(--esc-panel-border-input))] text-[var(--esc-panel-logo-tile-fg,var(--esc-panel-text))]"
+                        data-testid="esc-logo-tile"
+                    >
                         <img
                             v-if="typeof panelConfig.logo === 'string'"
                             :src="panelConfig.logo"
@@ -462,22 +551,23 @@ function isActive(href) {
                             </g>
                         </svg>
                     </div>
-                    <span class="text-sm font-bold text-[var(--esc-panel-text)] tracking-wide">{{
-                        panelConfig.appName
-                    }}</span>
+                    <span
+                        class="truncate text-sm font-bold tracking-wide text-[var(--esc-panel-header-text,var(--esc-panel-text))]"
+                        >{{ panelConfig.appName }}</span
+                    >
                 </div>
 
-                <!-- Center: nav links -->
-                <div class="flex items-center gap-1">
+                <!-- Center: nav links (lg and up) -->
+                <div class="hidden items-center gap-1 lg:flex">
                     <Link
                         v-for="link in agentLinks"
                         :key="link.href"
                         :href="link.href"
-                        :aria-current="isActive(link.href) ? 'page' : undefined"
+                        :aria-current="isActive(link.href, link.exact) ? 'page' : undefined"
                         :class="[
-                            'flex items-center gap-2 rounded-lg px-3.5 py-1.5 text-[13px] font-medium transition-all',
-                            isActive(link.href)
-                                ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-text)]'
+                            'flex items-center gap-2 whitespace-nowrap rounded-lg px-3.5 py-1.5 text-[13px] font-medium transition-all',
+                            isActive(link.href, link.exact)
+                                ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-active-text,var(--esc-panel-text))]'
                                 : 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
                         ]"
                     >
@@ -488,36 +578,110 @@ function isActive(href) {
                     </Link>
                 </div>
 
-                <!-- Right: user + links -->
-                <div class="flex items-center gap-3">
+                <!-- Right: user + links (lg and up) -->
+                <div class="hidden items-center gap-3 lg:flex">
                     <Link
                         v-if="isAdmin"
                         :href="`${prefix}/admin/reports`"
-                        class="text-[13px] text-[var(--esc-panel-text-muted)] transition-colors hover:text-[var(--esc-panel-text)]"
+                        class="whitespace-nowrap text-[13px] text-[var(--esc-panel-text-muted)] transition-colors hover:text-[var(--esc-panel-text)]"
                     >
                         Admin
                     </Link>
                     <Link
                         :href="prefix"
-                        class="text-[13px] text-[var(--esc-panel-text-muted)] transition-colors hover:text-[var(--esc-panel-text)]"
+                        class="whitespace-nowrap text-[13px] text-[var(--esc-panel-text-muted)] transition-colors hover:text-[var(--esc-panel-text)]"
                     >
                         Back to App
                     </Link>
                     <div class="ml-1 h-5 w-px bg-[var(--esc-panel-active)]"></div>
                     <div class="flex items-center gap-2">
                         <div
-                            class="flex h-7 w-7 items-center justify-center rounded-md bg-[var(--esc-panel-active)] text-[10px] font-semibold text-[var(--esc-panel-text-tertiary)]"
+                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-[var(--esc-panel-active)] text-[10px] font-semibold text-[var(--esc-panel-text-tertiary)]"
                         >
                             {{ userInitial }}
                         </div>
-                        <span class="text-[13px] text-[var(--esc-panel-text-tertiary)]">{{ userName }}</span>
+                        <span class="max-w-[12rem] truncate text-[13px] text-[var(--esc-panel-text-tertiary)]">{{
+                            userName
+                        }}</span>
                     </div>
                 </div>
+
+                <!-- Menu button (below lg) -->
+                <button
+                    type="button"
+                    class="-mr-2 rounded-lg p-2 text-[var(--esc-panel-header-text,var(--esc-panel-text))] hover:bg-[var(--esc-panel-hover)] lg:hidden"
+                    aria-controls="esc-agent-menu"
+                    :aria-expanded="navOpen ? 'true' : 'false'"
+                    :aria-label="navOpen ? 'Close navigation' : 'Open navigation'"
+                    data-testid="esc-nav-toggle"
+                    @click="toggleNav"
+                >
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path v-if="navOpen" stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        <path
+                            v-else
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                        />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Collapsed menu (below lg) -->
+            <div
+                v-if="navOpen"
+                id="esc-agent-menu"
+                class="space-y-1 border-t border-[var(--esc-panel-border)] px-4 py-3 lg:hidden"
+                data-testid="esc-agent-menu"
+            >
+                <Link
+                    v-for="link in agentLinks"
+                    :key="link.href"
+                    :href="link.href"
+                    :aria-current="isActive(link.href, link.exact) ? 'page' : undefined"
+                    :class="[
+                        'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium',
+                        isActive(link.href, link.exact)
+                            ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-active-text,var(--esc-panel-text))]'
+                            : 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
+                    ]"
+                    @click="closeNav"
+                >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" :d="link.icon" />
+                    </svg>
+                    {{ link.label }}
+                </Link>
+                <div class="my-2 h-px bg-[var(--esc-panel-border)]"></div>
+                <Link
+                    v-if="isAdmin"
+                    :href="`${prefix}/admin/reports`"
+                    class="block rounded-lg px-3 py-2 text-sm text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text)]"
+                    @click="closeNav"
+                >
+                    Admin
+                </Link>
+                <Link
+                    :href="prefix"
+                    class="block rounded-lg px-3 py-2 text-sm text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text)]"
+                    @click="closeNav"
+                >
+                    Back to App
+                </Link>
+                <div class="flex items-center gap-2 px-3 py-2">
+                    <div
+                        class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-[var(--esc-panel-active)] text-[10px] font-semibold text-[var(--esc-panel-text-tertiary)]"
+                    >
+                        {{ userInitial }}
+                    </div>
+                    <span class="truncate text-sm text-[var(--esc-panel-text-tertiary)]">{{ userName }}</span>
+                </div>
             </div>
         </nav>
 
         <!-- Page content -->
-        <main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        <main ref="contentRoot" class="mx-auto min-w-0 max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
             <slot />
         </main>
 
@@ -626,3 +790,25 @@ function isActive(href) {
         </footer>
     </div>
 </template>
+
+<style>
+/* Tables in the panels scroll sideways inside this container rather than
+   widening the page. A shadow on an edge says there is more past it; the
+   layout keeps data-esc-overflow current (see utils/scrollAffordance.js). */
+.esc-table-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+}
+.esc-table-scroll[data-esc-overflow='end'] {
+    box-shadow: inset -14px 0 12px -12px rgb(0 0 0 / 0.3);
+}
+.esc-table-scroll[data-esc-overflow='start'] {
+    box-shadow: inset 14px 0 12px -12px rgb(0 0 0 / 0.3);
+}
+.esc-table-scroll[data-esc-overflow='start end'] {
+    box-shadow:
+        inset 14px 0 12px -12px rgb(0 0 0 / 0.3),
+        inset -14px 0 12px -12px rgb(0 0 0 / 0.3);
+}
+</style>

package/src/components/PeriodSelector.vue

@@ -38,7 +38,7 @@ function formatLabel(days) {
 </script>
 
 <template>
-    <div class="flex items-center gap-2">
+    <div class="flex flex-wrap items-center gap-2">
         <button
             v-for="d in options"
             :key="d"

package/src/components/PermissionMatrix.vue

@@ -56,7 +56,7 @@ function isGroupAllChecked(group) {
 </script>
 
 <template>
-    <div class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
+    <div class="esc-table-scroll rounded-xl border border-white/[0.06] bg-neutral-900/60">
         <table class="min-w-full divide-y divide-white/[0.06]">
             <thead>
                 <tr class="bg-white/[0.02]">

package/src/components/QuickFilters.vue

@@ -33,7 +33,10 @@ function selectTab(tab) {
 
 <template>
     <div
-        :class="['flex items-center gap-0 border-b', escDark ? 'border-white/[0.08]' : 'border-gray-200']"
+        :class="[
+            'flex items-center gap-0 overflow-x-auto border-b',
+            escDark ? 'border-white/[0.08]' : 'border-gray-200',
+        ]"
         role="tablist"
         aria-label="Ticket view tabs"
     >
@@ -43,7 +46,7 @@ function selectTab(tab) {
             role="tab"
             :aria-selected="activeTab === tab.key"
             :class="[
-                'relative px-4 py-2.5 text-sm font-medium transition-colors whitespace-nowrap',
+                'relative shrink-0 px-4 py-2.5 text-sm font-medium transition-colors whitespace-nowrap',
                 'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0',
                 activeTab === tab.key
                     ? escDark

package/src/components/TicketList.vue

@@ -204,7 +204,7 @@ const colCount = computed(() => {
 
 <template>
     <!-- Dark mode -->
-    <div v-if="escDark" class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
+    <div v-if="escDark" class="esc-table-scroll rounded-xl border border-white/[0.06] bg-neutral-900/60">
         <table class="min-w-full divide-y divide-white/[0.06]">
             <thead>
                 <tr class="bg-white/[0.02]">
@@ -430,7 +430,7 @@ const colCount = computed(() => {
     </div>
 
     <!-- Light mode -->
-    <div v-else class="overflow-hidden rounded-lg border border-gray-200 bg-white">
+    <div v-else class="esc-table-scroll rounded-lg border border-gray-200 bg-white">
         <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
                 <tr>

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>