From 5ecc098d777b2141c696d4687f3baa54c96de4b3 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.l.kolle.pers@gmail.com>
Date: Sun, 22 Mar 2026 15:20:02 +0100
Subject: [PATCH 1/3] feat: enhance mobile responsiveness and scrollbar
 visibility across components

---
 app/assets/css/main.css                      |  9 +++++
 app/components/AppTopBar.vue                 | 16 ++++----
 app/components/CandidateDetailSidebar.vue    | 10 ++---
 app/components/DemoUpsellBanner.vue          |  2 +-
 app/components/InterviewEmailModal.vue       | 10 ++---
 app/pages/dashboard/index.vue                | 16 ++++----
 app/pages/dashboard/jobs/[id]/candidates.vue |  8 ++--
 app/pages/dashboard/jobs/[id]/index.vue      | 39 +++++++++++++++-----
 app/pages/dashboard/settings/members.vue     |  2 +-
 app/pages/dashboard/updates.vue              |  2 +-
 nuxt.config.ts                               |  1 +
 11 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 1fecf17..2b2a847 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -335,6 +335,15 @@
 
 /* ── Pipeline view premium touches ──────────────────── */
 
+/* Hide scrollbar but keep functionality (for horizontal-scroll navs) */
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
 /* Smooth candidate card highlight on selection */
 .pipeline-candidate-card {
   position: relative;
diff --git a/app/components/AppTopBar.vue b/app/components/AppTopBar.vue
index 8708f60..3dc68b6 100644
--- a/app/components/AppTopBar.vue
+++ b/app/components/AppTopBar.vue
@@ -400,18 +400,18 @@ onUnmounted(() => {
         v-if="activeJobId"
         class="relative z-10 border-b border-surface-200/60 dark:border-surface-800/60 bg-surface-50/90 dark:bg-surface-950/90 backdrop-blur-lg"
       >
-        <div class="flex items-center gap-4 px-4 lg:px-6 h-10">
+        <div class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 lg:px-6 h-10 overflow-x-auto scrollbar-none">
           <NuxtLink
             :to="$localePath('/dashboard/jobs')"
-            class="flex items-center gap-1 text-xs font-medium text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors no-underline shrink-0"
+            class="hidden sm:flex items-center gap-1 text-xs font-medium text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors no-underline shrink-0"
           >
             <ChevronLeft class="size-3.5" />
             All Jobs
           </NuxtLink>
 
-          <div class="w-px h-4 bg-surface-200 dark:bg-surface-700" />
+          <div class="hidden sm:block w-px h-4 bg-surface-200 dark:bg-surface-700 shrink-0" />
 
-          <div class="flex items-center gap-2 shrink-0 min-w-0">
+          <div class="hidden md:flex items-center gap-2 shrink-0 min-w-0">
             <Briefcase class="size-3.5 text-brand-500 shrink-0" />
             <span class="text-sm font-semibold text-surface-900 dark:text-surface-100 truncate max-w-48">
               {{ activeJobTitle }}
@@ -425,22 +425,22 @@ onUnmounted(() => {
             </span>
           </div>
 
-          <nav class="flex items-center gap-0.5 ml-2">
+          <nav class="flex items-center gap-0.5 md:ml-2">
             <NuxtLink
               v-for="tab in jobTabs"
               :key="tab.to"
               :to="$localePath(tab.to)"
-              class="flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-200 no-underline"
+              class="flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-200 no-underline whitespace-nowrap shrink-0"
               :class="isActiveRoute(tab.to, tab.exact)
                 ? 'bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 shadow-sm'
                 : 'text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 hover:bg-white/60 dark:hover:bg-surface-800/60'"
             >
               <component :is="tab.icon" class="size-3.5" />
-              {{ tab.label }}
+              <span class="hidden sm:inline">{{ tab.label }}</span>
             </NuxtLink>
           </nav>
 
-          <div class="ml-auto flex items-center gap-2">
+          <div class="ml-auto flex items-center gap-2 shrink-0">
             <div id="job-sub-nav-actions" />
           </div>
         </div>
diff --git a/app/components/CandidateDetailSidebar.vue b/app/components/CandidateDetailSidebar.vue
index 33e8e1b..73da748 100644
--- a/app/components/CandidateDetailSidebar.vue
+++ b/app/components/CandidateDetailSidebar.vue
@@ -330,11 +330,11 @@ function formatInterviewDate(dateStr: string) {
   <Transition name="slide">
     <aside
       v-if="open"
-      class="fixed right-0 z-40 w-[640px] max-w-[calc(100vw-4rem)] border-l border-surface-200/80 dark:border-surface-800/60 bg-white dark:bg-surface-900 shadow-xl flex flex-col"
+      class="fixed right-0 z-40 w-full sm:w-[640px] sm:max-w-[calc(100vw-4rem)] border-l border-surface-200/80 dark:border-surface-800/60 bg-white dark:bg-surface-900 shadow-xl flex flex-col"
       :class="hasSubNav ? 'top-24 h-[calc(100vh-6rem)]' : 'top-14 h-[calc(100vh-3.5rem)]'"
     >
       <!-- Header -->
-      <div class="flex items-center justify-between border-b border-surface-200/80 dark:border-surface-800/60 px-6 py-4 shrink-0">
+      <div class="flex items-center justify-between border-b border-surface-200/80 dark:border-surface-800/60 px-4 sm:px-6 py-4 shrink-0">
         <div v-if="application" class="min-w-0 flex-1">
           <div class="flex items-center gap-3">
             <div class="flex items-center justify-center size-10 rounded-full bg-brand-50 dark:bg-brand-950 text-brand-700 dark:text-brand-400 font-semibold text-sm shrink-0">
@@ -385,8 +385,8 @@ function formatInterviewDate(dateStr: string) {
       </div>
 
       <!-- Tabs -->
-      <div v-if="application" class="border-b border-surface-200/80 dark:border-surface-800/60 px-6 shrink-0">
-        <div class="flex gap-1">
+      <div v-if="application" class="border-b border-surface-200/80 dark:border-surface-800/60 px-4 sm:px-6 shrink-0">
+        <div class="flex gap-1 overflow-x-auto scrollbar-none">
           <button
             class="cursor-pointer px-3 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px"
             :class="activeTab === 'overview'
@@ -429,7 +429,7 @@ function formatInterviewDate(dateStr: string) {
       </div>
 
       <!-- Body -->
-      <div class="flex-1 overflow-y-auto px-6 py-5">
+      <div class="flex-1 overflow-y-auto px-4 sm:px-6 py-5">
         <!-- Loading -->
         <div v-if="fetchStatus === 'pending'" class="text-center py-12 text-surface-400">
           Loading details…
diff --git a/app/components/DemoUpsellBanner.vue b/app/components/DemoUpsellBanner.vue
index 3471e1d..0af427a 100644
--- a/app/components/DemoUpsellBanner.vue
+++ b/app/components/DemoUpsellBanner.vue
@@ -14,7 +14,7 @@ async function handleUpgrade() {
 
 <template>
   <Teleport to="body">
-    <div class="fixed bottom-5 left-5 z-50 w-[300px]">
+    <div class="fixed bottom-4 left-4 right-4 z-50 sm:right-auto sm:w-[300px]">
       <div
         class="relative overflow-hidden rounded-2xl border border-white/[0.08] bg-gradient-to-br from-surface-900 via-surface-900 to-brand-950/80 shadow-2xl backdrop-blur-xl dark:from-surface-950 dark:via-surface-950 dark:to-brand-950/90"
       >
diff --git a/app/components/InterviewEmailModal.vue b/app/components/InterviewEmailModal.vue
index 1db1d75..9666c7b 100644
--- a/app/components/InterviewEmailModal.vue
+++ b/app/components/InterviewEmailModal.vue
@@ -160,7 +160,7 @@ const canSend = computed(() => {
       <!-- Modal -->
       <div class="relative bg-white dark:bg-surface-900 rounded-2xl shadow-2xl shadow-surface-900/10 dark:shadow-black/30 ring-1 ring-surface-200/80 dark:ring-surface-700/60 w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col overflow-hidden">
         <!-- Header -->
-        <div class="shrink-0 border-b border-surface-200/80 dark:border-surface-800/60 px-6 py-4">
+        <div class="shrink-0 border-b border-surface-200/80 dark:border-surface-800/60 px-4 sm:px-6 py-4">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-2.5">
               <div class="flex size-9 items-center justify-center rounded-lg bg-brand-50 dark:bg-brand-950/40">
@@ -198,7 +198,7 @@ const canSend = computed(() => {
         <!-- Main content -->
         <template v-else>
           <!-- Tabs -->
-          <div class="shrink-0 border-b border-surface-200/80 dark:border-surface-800/60 px-6">
+          <div class="shrink-0 border-b border-surface-200/80 dark:border-surface-800/60 px-4 sm:px-6 overflow-x-auto scrollbar-none">
             <div class="flex gap-1">
               <button
                 v-for="tab in ([
@@ -207,7 +207,7 @@ const canSend = computed(() => {
                   { id: 'manage' as Tab, label: 'Manage Templates', icon: Sparkles },
                 ])"
                 :key="tab.id"
-                class="flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium border-b-2 transition-all cursor-pointer -mb-px"
+                class="flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium border-b-2 transition-all cursor-pointer -mb-px whitespace-nowrap shrink-0"
                 :class="activeTab === tab.id
                   ? 'border-brand-500 text-brand-700 dark:text-brand-300'
                   : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
@@ -220,13 +220,13 @@ const canSend = computed(() => {
           </div>
 
           <!-- Error -->
-          <div v-if="sendError" class="mx-6 mt-4 flex items-start gap-2.5 rounded-xl border border-danger-200/80 bg-danger-50 p-3.5 text-sm text-danger-700 dark:border-danger-800/60 dark:bg-danger-950/40 dark:text-danger-300">
+          <div v-if="sendError" class="mx-4 sm:mx-6 mt-4 flex items-start gap-2.5 rounded-xl border border-danger-200/80 bg-danger-50 p-3.5 text-sm text-danger-700 dark:border-danger-800/60 dark:bg-danger-950/40 dark:text-danger-300">
             <AlertCircle class="size-4 shrink-0 mt-0.5" />
             {{ sendError }}
           </div>
 
           <!-- Tab content -->
-          <div class="flex-1 overflow-y-auto px-6 py-5">
+          <div class="flex-1 overflow-y-auto px-4 sm:px-6 py-5">
             <!-- Template Selection Tab -->
             <div v-if="activeTab === 'template'" class="space-y-3">
               <p class="text-xs text-surface-500 dark:text-surface-400 mb-3">
diff --git a/app/pages/dashboard/index.vue b/app/pages/dashboard/index.vue
index 230423a..7654f0d 100644
--- a/app/pages/dashboard/index.vue
+++ b/app/pages/dashboard/index.vue
@@ -211,16 +211,16 @@ const isEmpty = computed(() =>
     <!-- ─── Dashboard content ─── -->
     <template v-else>
       <!-- ─── Header ─── -->
-      <div class="flex items-center justify-between mb-10">
+      <div class="flex items-center justify-between mb-6 sm:mb-10">
         <div>
-          <h1 class="text-2xl font-bold text-surface-900 dark:text-surface-50 tracking-tight">Dashboard</h1>
+          <h1 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-50 tracking-tight">Dashboard</h1>
           <p v-if="activeOrg" class="text-sm text-surface-400 dark:text-surface-500 mt-1">
             {{ activeOrg.name }}
           </p>
         </div>
         <NuxtLink
           :to="localePath('/dashboard/jobs/new')"
-          class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-700 shadow-sm shadow-brand-600/15 hover:shadow-md hover:shadow-brand-600/20 transition-all no-underline"
+          class="inline-flex items-center gap-1.5 sm:gap-2 rounded-xl bg-brand-600 px-3 sm:px-5 py-2 sm:py-2.5 text-xs sm:text-sm font-semibold text-white hover:bg-brand-700 shadow-sm shadow-brand-600/15 hover:shadow-md hover:shadow-brand-600/20 transition-all no-underline shrink-0"
         >
           <Plus class="size-4" />
           New Job
@@ -228,7 +228,7 @@ const isEmpty = computed(() =>
       </div>
 
       <!-- ─── Stat cards ─── -->
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-10">
         <!-- Open Jobs -->
         <NuxtLink
           :to="localePath('/dashboard/jobs')"
@@ -242,7 +242,7 @@ const isEmpty = computed(() =>
                 <Briefcase class="size-4 text-brand-600 dark:text-brand-400" />
               </div>
             </div>
-            <div class="text-3xl font-bold text-surface-900 dark:text-surface-50 tracking-tight tabular-nums">
+            <div class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-50 tracking-tight tabular-nums">
               {{ counts.openJobs }}
             </div>
             <p class="text-xs text-surface-400 mt-1.5">
@@ -264,7 +264,7 @@ const isEmpty = computed(() =>
                 <Users class="size-4 text-violet-600 dark:text-violet-400" />
               </div>
             </div>
-            <div class="text-3xl font-bold text-surface-900 dark:text-surface-50 tracking-tight tabular-nums">
+            <div class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-50 tracking-tight tabular-nums">
               {{ counts.totalCandidates }}
             </div>
             <p class="text-xs text-surface-400 mt-1.5">Talent pool</p>
@@ -284,7 +284,7 @@ const isEmpty = computed(() =>
                 <FileText class="size-4 text-teal-600 dark:text-teal-400" />
               </div>
             </div>
-            <div class="text-3xl font-bold text-surface-900 dark:text-surface-50 tracking-tight tabular-nums">
+            <div class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-50 tracking-tight tabular-nums">
               {{ counts.totalApplications }}
             </div>
             <p class="text-xs text-surface-400 mt-1.5">Total received</p>
@@ -318,7 +318,7 @@ const isEmpty = computed(() =>
               </div>
             </div>
             <div
-              class="text-3xl font-bold tracking-tight tabular-nums"
+              class="text-2xl sm:text-3xl font-bold tracking-tight tabular-nums"
               :class="counts.newApplications > 0
                 ? 'text-warning-700 dark:text-warning-400'
                 : 'text-surface-900 dark:text-surface-50'"
diff --git a/app/pages/dashboard/jobs/[id]/candidates.vue b/app/pages/dashboard/jobs/[id]/candidates.vue
index 5e29580..cb74bed 100644
--- a/app/pages/dashboard/jobs/[id]/candidates.vue
+++ b/app/pages/dashboard/jobs/[id]/candidates.vue
@@ -429,7 +429,7 @@ const isLoading = computed(() => jobFetchStatus.value === 'pending' || appFetchS
                     <ChevronsUpDown v-else class="size-3 opacity-40" />
                   </button>
                 </th>
-                <th v-if="visibleCols.email" class="px-4 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wide select-none">
+                <th v-if="visibleCols.email" class="hidden sm:table-cell px-4 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wide select-none">
                   <button class="inline-flex items-center gap-1 hover:text-surface-900 dark:hover:text-surface-100 transition-colors" @click="toggleSort('email')">
                     Email
                     <ChevronUp v-if="sortKey === 'email' && sortDir === 'asc'" class="size-3" />
@@ -453,7 +453,7 @@ const isLoading = computed(() => jobFetchStatus.value === 'pending' || appFetchS
                     <ChevronsUpDown v-else class="size-3 opacity-40" />
                   </button>
                 </th>
-                <th v-if="visibleCols.createdAt" class="px-4 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wide select-none">
+                <th v-if="visibleCols.createdAt" class="hidden md:table-cell px-4 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wide select-none">
                   <button class="inline-flex items-center gap-1 hover:text-surface-900 dark:hover:text-surface-100 transition-colors" @click="toggleSort('createdAt')">
                     Applied
                     <ChevronUp v-if="sortKey === 'createdAt' && sortDir === 'asc'" class="size-3" />
@@ -497,7 +497,7 @@ const isLoading = computed(() => jobFetchStatus.value === 'pending' || appFetchS
                     </span>
                   </div>
                 </td>
-                <td v-if="visibleCols.email" class="px-4 py-3 text-surface-600 dark:text-surface-300 max-w-[220px] truncate">
+                <td v-if="visibleCols.email" class="hidden sm:table-cell px-4 py-3 text-surface-600 dark:text-surface-300 max-w-[220px] truncate">
                   <a
                     :href="`mailto:${app.candidateEmail}`"
                     target="_blank"
@@ -522,7 +522,7 @@ const isLoading = computed(() => jobFetchStatus.value === 'pending' || appFetchS
                     {{ app.status }}
                   </span>
                 </td>
-                <td v-if="visibleCols.createdAt" class="px-4 py-3 text-surface-500 dark:text-surface-400 whitespace-nowrap text-xs font-medium">
+                <td v-if="visibleCols.createdAt" class="hidden md:table-cell px-4 py-3 text-surface-500 dark:text-surface-400 whitespace-nowrap text-xs font-medium">
                   {{ timeAgo(app.createdAt) }}
                 </td>
               </tr>
diff --git a/app/pages/dashboard/jobs/[id]/index.vue b/app/pages/dashboard/jobs/[id]/index.vue
index 4795b92..69aa9df 100644
--- a/app/pages/dashboard/jobs/[id]/index.vue
+++ b/app/pages/dashboard/jobs/[id]/index.vue
@@ -211,6 +211,9 @@ const statusCounts = computed(() => {
 
 const currentIndex = ref(0)
 
+// Mobile: toggle between candidate list and detail view
+const showMobileDetail = ref(false)
+
 watch(focusedApplications, () => {
   if (focusedApplications.value.length === 0) {
     currentIndex.value = 0
@@ -454,6 +457,7 @@ function setFocusStatus(status: PipelineStatus) {
 
 function selectCandidate(index: number) {
   currentIndex.value = index
+  showMobileDetail.value = true
 }
 
 const isMutating = ref(false)
@@ -1256,7 +1260,7 @@ function closeDocPreview() {
       <!-- PIPELINE STATUS TABS                     -->
       <!-- ═══════════════════════════════════════ -->
       <div class="shrink-0 border-b border-surface-200/80 bg-white dark:border-surface-800/60 dark:bg-surface-900">
-        <div class="flex items-center gap-1 overflow-x-auto px-5 py-2">
+        <div class="flex items-center gap-1 overflow-x-auto scrollbar-none px-3 sm:px-5 py-2">
           <button
             v-for="status in PIPELINE_STATUSES"
             :key="`tab-${status}`"
@@ -1303,7 +1307,10 @@ function closeDocPreview() {
       <div class="flex flex-1 overflow-hidden">
 
         <!-- LEFT PANEL — Candidate list -->
-        <div class="flex w-72 shrink-0 flex-col border-r border-surface-200/80 bg-white dark:border-surface-800/60 dark:bg-surface-900">
+        <div
+          class="flex flex-col border-r border-surface-200/80 bg-white dark:border-surface-800/60 dark:bg-surface-900"
+          :class="showMobileDetail ? 'hidden md:flex md:w-72 md:shrink-0' : 'w-full md:w-72 md:shrink-0'"
+        >
           <!-- Search + Sort + Filter controls -->
           <div class="shrink-0 px-3.5 pt-3 pb-2 space-y-2 dark:border-surface-800">
             <!-- Search input -->
@@ -1523,7 +1530,19 @@ function closeDocPreview() {
         </div>
 
         <!-- CENTER PANEL — Candidate detail -->
-        <div class="flex flex-1 flex-col overflow-hidden">
+        <div
+          class="flex flex-1 flex-col overflow-hidden"
+          :class="showMobileDetail ? 'flex' : 'hidden md:flex'"
+        >
+          <!-- Mobile back button -->
+          <button
+            class="md:hidden flex items-center gap-2 px-4 py-2.5 border-b border-surface-200/80 dark:border-surface-800/60 bg-white dark:bg-surface-900 text-sm font-medium text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 transition-colors"
+            @click="showMobileDetail = false"
+          >
+            <ArrowLeft class="size-4" />
+            Back to candidates
+          </button>
+
           <!-- Empty state -->
           <div
             v-if="!currentSummary"
@@ -1542,8 +1561,8 @@ function closeDocPreview() {
 
           <template v-else>
             <!-- Sticky status transitions (stays visible on scroll) -->
-            <div v-if="allowedTransitions.length > 0" class="shrink-0 border-b border-surface-200/80 bg-white/95 backdrop-blur-sm px-6 py-2.5 dark:border-surface-800/60 dark:bg-surface-900/95">
-              <div class="mx-auto max-w-4xl flex flex-wrap items-center gap-2">
+            <div v-if="allowedTransitions.length > 0" class="shrink-0 border-b border-surface-200/80 bg-white/95 backdrop-blur-sm px-4 sm:px-6 py-2.5 dark:border-surface-800/60 dark:bg-surface-900/95">
+              <div class="mx-auto max-w-4xl flex flex-wrap items-center gap-1.5 sm:gap-2">
                 <button
                   v-for="(nextStatus, idx) in allowedTransitions"
                   :key="nextStatus"
@@ -1562,9 +1581,9 @@ function closeDocPreview() {
             <div ref="detailScrollContainer" class="flex-1 overflow-y-auto">
 
             <!-- Candidate header -->
-            <div class="border-b border-surface-200 bg-surface-50 px-6 py-6 dark:border-surface-800 dark:bg-surface-900/80">
+            <div class="border-b border-surface-200 bg-surface-50 px-4 sm:px-6 py-4 sm:py-6 dark:border-surface-800 dark:bg-surface-900/80">
               <div class="mx-auto max-w-4xl">
-              <div class="flex items-start justify-between gap-4">
+              <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                 <div class="flex items-start gap-4 min-w-0">
                   <div class="flex size-14 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-400 to-brand-600 text-lg font-bold text-white shadow-lg shadow-brand-500/20 dark:from-brand-500 dark:to-brand-700 dark:shadow-brand-500/10">
                     {{ getCandidateInitials(currentSummary.candidateFirstName, currentSummary.candidateLastName) }}
@@ -1669,8 +1688,8 @@ function closeDocPreview() {
             </div>
 
             <!-- Detail tabs -->
-            <div class="border-b border-surface-200/80 bg-white px-6 dark:border-surface-800/60 dark:bg-surface-900">
-              <div class="mx-auto max-w-4xl flex gap-1 -mb-px">
+            <div class="border-b border-surface-200/80 bg-white px-4 sm:px-6 dark:border-surface-800/60 dark:bg-surface-900">
+              <div class="mx-auto max-w-4xl flex gap-1 -mb-px overflow-x-auto scrollbar-none">
                 <div ref="overviewDropdownRef" class="relative">
                   <div class="flex items-center border-b-2 transition-all duration-150" :class="detailTab === 'overview'
                     ? 'border-brand-600 dark:border-brand-400'
@@ -1784,7 +1803,7 @@ function closeDocPreview() {
             </div>
 
             <!-- Detail content -->
-            <div class="bg-surface-50/80 dark:bg-surface-950/80 px-6 py-8">
+            <div class="bg-surface-50/80 dark:bg-surface-950/80 px-4 sm:px-6 py-5 sm:py-8">
               <div v-if="detailFetchStatus === 'pending' && !resolvedCurrentApplication" class="flex flex-col items-center justify-center py-12">
                 <div class="size-8 rounded-full border-2 border-brand-200 border-t-brand-600 dark:border-brand-800 dark:border-t-brand-400 animate-spin" />
                 <p class="mt-3 text-sm text-surface-400">Loading details…</p>
diff --git a/app/pages/dashboard/settings/members.vue b/app/pages/dashboard/settings/members.vue
index 8b119fb..480907b 100644
--- a/app/pages/dashboard/settings/members.vue
+++ b/app/pages/dashboard/settings/members.vue
@@ -580,7 +580,7 @@ onUnmounted(() => {
             </button>
           </div>
 
-          <div class="flex gap-3">
+          <div class="flex flex-col sm:flex-row gap-3">
             <div class="flex-1">
               <label for="invite-email" class="sr-only">Email address</label>
               <input
diff --git a/app/pages/dashboard/updates.vue b/app/pages/dashboard/updates.vue
index 462889b..b1ac124 100644
--- a/app/pages/dashboard/updates.vue
+++ b/app/pages/dashboard/updates.vue
@@ -265,7 +265,7 @@ function formatDate(dateString: string | null | undefined): string {
 
       <div class="px-6 py-5 space-y-4">
         <!-- Version details -->
-        <div class="grid grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
             <p class="text-xs font-medium text-surface-400 dark:text-surface-500 uppercase tracking-wide">
               Installed version
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e9a9554..52d1e02 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -99,6 +99,7 @@ export default defineNuxtConfig({
       ],
       meta: [
         { name: 'theme-color', content: '#09090b' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=5.0' },
       ],
       // Plausible removed — PostHog handles all analytics
     },

From 2cb97235c7f4a0282268edddbc2983d134f020a9 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.l.kolle.pers@gmail.com>
Date: Mon, 23 Mar 2026 11:58:15 +0100
Subject: [PATCH 2/3] refactor: update layout and styling for settings pages

- Adjusted padding and margin for various sections in ai.vue, index.vue, integrations.vue, members.vue to improve responsiveness and consistency.
- Introduced SettingsMobileNav component for mobile navigation in settings.
- Created settings layout to manage desktop and mobile views, including demo mode banner and upsell modal.
- Enhanced member and invite link sections for better alignment and spacing.
---
 app/assets/css/main.css                       |  28 ++
 app/components/SettingsMobileNav.vue          |  91 ++++++
 app/components/SettingsSidebar.vue            |   2 +-
 app/layouts/dashboard.vue                     |   4 +-
 app/layouts/settings.vue                      |  61 ++++
 app/pages/dashboard/jobs/[id]/index.vue       | 106 +++++--
 app/pages/dashboard/settings.vue              |  51 ++--
 app/pages/dashboard/settings/account.vue      |  18 +-
 app/pages/dashboard/settings/ai.vue           |  36 +--
 app/pages/dashboard/settings/index.vue        |  14 +-
 app/pages/dashboard/settings/integrations.vue |   4 +-
 app/pages/dashboard/settings/members.vue      | 279 +++++++++---------
 12 files changed, 474 insertions(+), 220 deletions(-)
 create mode 100644 app/components/SettingsMobileNav.vue
 create mode 100644 app/layouts/settings.vue

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 2b2a847..d75417e 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -344,6 +344,34 @@
   display: none;
 }
 
+/* Thin visible scrollbar for scrollable panels */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-surface-300) transparent;
+}
+.dark .scrollbar-thin {
+  scrollbar-color: var(--color-surface-600) transparent;
+}
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: var(--color-surface-300);
+  border-radius: 3px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: var(--color-surface-400);
+}
+.dark .scrollbar-thin::-webkit-scrollbar-thumb {
+  background: var(--color-surface-600);
+}
+.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: var(--color-surface-500);
+}
+
 /* Smooth candidate card highlight on selection */
 .pipeline-candidate-card {
   position: relative;
diff --git a/app/components/SettingsMobileNav.vue b/app/components/SettingsMobileNav.vue
new file mode 100644
index 0000000..f98e04b
--- /dev/null
+++ b/app/components/SettingsMobileNav.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import {
+  Building2, Users, UserCircle, ChevronLeft, Plug, Brain,
+} from 'lucide-vue-next'
+
+const route = useRoute()
+const localePath = useLocalePath()
+
+const settingsNav = [
+  {
+    label: 'General',
+    to: '/dashboard/settings',
+    icon: Building2,
+    exact: true,
+  },
+  {
+    label: 'Members',
+    to: '/dashboard/settings/members',
+    icon: Users,
+    exact: true,
+  },
+  {
+    label: 'Integrations',
+    to: '/dashboard/settings/integrations',
+    icon: Plug,
+    exact: true,
+  },
+  {
+    label: 'AI',
+    to: '/dashboard/settings/ai',
+    icon: Brain,
+    exact: true,
+  },
+  {
+    label: 'Account',
+    to: '/dashboard/settings/account',
+    icon: UserCircle,
+    exact: true,
+  },
+]
+
+function isActive(to: string, exact: boolean) {
+  const localizedTo = localePath(to)
+  if (exact) return route.path === localizedTo
+  return route.path === localizedTo || route.path.startsWith(`${localizedTo}/`)
+}
+</script>
+
+<template>
+  <div class="border-b border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 shadow-sm">
+    <!-- Back link + title -->
+    <div class="flex items-center gap-3 px-4 pt-3 pb-2">
+      <NuxtLink
+        :to="$localePath('/dashboard')"
+        class="inline-flex items-center gap-1 text-xs font-medium text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors no-underline"
+      >
+        <ChevronLeft class="size-3.5" />
+        Back
+      </NuxtLink>
+      <h2 class="text-sm font-semibold text-surface-900 dark:text-surface-100">
+        Settings
+      </h2>
+    </div>
+
+    <!-- Scrollable tabs -->
+    <nav class="flex overflow-x-auto px-3 gap-1 pb-2 scrollbar-none">
+      <NuxtLink
+        v-for="item in settingsNav"
+        :key="item.to"
+        :to="$localePath(item.to)"
+        class="flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium transition-colors no-underline shrink-0"
+        :class="isActive(item.to, item.exact)
+          ? 'bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300'
+          : 'text-surface-500 dark:text-surface-400 hover:bg-surface-50 dark:hover:bg-surface-800/60 hover:text-surface-900 dark:hover:text-surface-100'"
+      >
+        <component :is="item.icon" class="size-3.5" />
+        {{ item.label }}
+      </NuxtLink>
+    </nav>
+  </div>
+</template>
+
+<style scoped>
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/app/components/SettingsSidebar.vue b/app/components/SettingsSidebar.vue
index 188c7a8..d425a41 100644
--- a/app/components/SettingsSidebar.vue
+++ b/app/components/SettingsSidebar.vue
@@ -53,7 +53,7 @@ function isActive(to: string, exact: boolean) {
 
 <template>
   <aside
-    class="flex h-full w-56 min-w-56 flex-col border-r border-surface-200 dark:border-surface-800 bg-white/80 dark:bg-surface-900/80 backdrop-blur-sm overflow-y-auto"
+    class="flex h-full w-56 min-w-56 flex-col border-r border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-y-auto overscroll-contain"
   >
     <!-- Header -->
     <div class="px-4 pt-5 pb-4">
diff --git a/app/layouts/dashboard.vue b/app/layouts/dashboard.vue
index 79698d4..e0f77a6 100644
--- a/app/layouts/dashboard.vue
+++ b/app/layouts/dashboard.vue
@@ -17,14 +17,14 @@ const isDemoAccount = computed(() => session.value?.user?.email === 'demo@reqcor
 </script>
 
 <template>
-  <div class="flex min-h-screen flex-col bg-surface-50 dark:bg-surface-950">
+  <div class="flex h-screen flex-col overflow-hidden bg-surface-50 dark:bg-surface-950">
     <AppTopBar />
     <AppToasts />
     <PreviewUpsellModal v-if="isUpsellOpen" @close="closeUpsell" />
     <ClientOnly>
       <DemoUpsellBanner v-if="isDemoAccount" />
     </ClientOnly>
-    <main class="flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+    <main class="relative flex-1 min-h-0 overflow-y-auto px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
       <!-- Demo mode banner -->
       <div
         v-if="isDemo"
diff --git a/app/layouts/settings.vue b/app/layouts/settings.vue
new file mode 100644
index 0000000..ef825a6
--- /dev/null
+++ b/app/layouts/settings.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Eye } from 'lucide-vue-next'
+import { usePreviewReadOnly } from '~/composables/usePreviewReadOnly'
+
+const { data: session } = await authClient.useSession(useFetch)
+
+const config = useRuntimeConfig()
+const { activeOrg } = useCurrentOrg()
+const { isUpsellOpen, closeUpsell } = usePreviewReadOnly()
+
+const isDemo = computed(() => {
+  const slug = config.public.demoOrgSlug
+  return slug && activeOrg.value?.slug === slug
+})
+
+const isDemoAccount = computed(() => session.value?.user?.email === 'demo@reqcore.com')
+</script>
+
+<template>
+  <div class="flex min-h-screen flex-col bg-surface-50 dark:bg-surface-950">
+    <!-- AppTopBar: desktop only -->
+    <AppTopBar class="hidden lg:block" />
+    <AppToasts />
+    <PreviewUpsellModal v-if="isUpsellOpen" @close="closeUpsell" />
+    <ClientOnly>
+      <DemoUpsellBanner v-if="isDemoAccount" />
+    </ClientOnly>
+
+    <!-- Demo mode banner -->
+    <div
+      v-if="isDemo"
+      class="mx-auto mb-6 flex max-w-5xl items-center gap-3 rounded-lg border border-brand-200 dark:border-brand-900 bg-brand-50 dark:bg-brand-950/40 px-4 py-2.5 text-sm text-brand-700 dark:text-brand-300"
+    >
+      <Eye class="size-4 shrink-0" />
+      <span>
+        <strong>Live demo</strong> — Explore freely with sample data. Editing is disabled here.
+        <a
+          href="https://github.com/reqcore-inc/reqcore#quick-start"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="ml-1 font-semibold underline decoration-brand-400/40 underline-offset-2 hover:decoration-brand-400"
+        >Deploy your own free instance →</a>
+      </span>
+    </div>
+
+    <div class="flex flex-1 flex-col lg:flex-row min-w-0">
+      <!-- Desktop sidebar -->
+      <div class="hidden lg:block sticky top-14 h-[calc(100vh-3.5rem)] shrink-0 z-10">
+        <SettingsSidebar />
+      </div>
+      <!-- Mobile top nav -->
+      <div class="lg:hidden sticky top-0 z-10">
+        <SettingsMobileNav />
+      </div>
+      <!-- Page content -->
+      <main class="flex-1 min-w-0 px-4 py-5 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/dashboard/jobs/[id]/index.vue b/app/pages/dashboard/jobs/[id]/index.vue
index 69aa9df..f698549 100644
--- a/app/pages/dashboard/jobs/[id]/index.vue
+++ b/app/pages/dashboard/jobs/[id]/index.vue
@@ -230,6 +230,16 @@ watch(focusStatus, () => {
   closePanels()
 })
 
+// Auto-scroll mobile bottom bar to keep selected candidate visible
+watch(currentIndex, () => {
+  nextTick(() => {
+    const container = mobileBottomBar.value
+    if (!container) return
+    const selected = container.querySelector(`[data-candidate-idx="${currentIndex.value}"]`) as HTMLElement | null
+    selected?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+  })
+})
+
 const currentSummary = computed(() => filteredApplications.value[currentIndex.value] ?? null)
 
 // Detail tab for center panel
@@ -275,6 +285,7 @@ const interviewsRef = ref<HTMLElement | null>(null)
 const documentsRef = ref<HTMLElement | null>(null)
 const responsesRef = ref<HTMLElement | null>(null)
 const detailScrollContainer = ref<HTMLElement | null>(null)
+const mobileBottomBar = ref<HTMLElement | null>(null)
 
 type SwipeDocument = {
   id: string
@@ -1129,7 +1140,7 @@ function closeDocPreview() {
     ref="pipelineContainer"
     :class="isFullscreen
       ? 'flex h-screen flex-col overflow-hidden bg-surface-50 dark:bg-surface-950'
-      : '-mx-6 -my-8 flex h-screen flex-col overflow-hidden'"
+      : 'absolute inset-0 flex flex-col overflow-hidden'"
   >
     <!-- Loading -->
     <div v-if="isLoading" class="flex flex-1 flex-col items-center justify-center gap-3">
@@ -1260,7 +1271,7 @@ function closeDocPreview() {
       <!-- PIPELINE STATUS TABS                     -->
       <!-- ═══════════════════════════════════════ -->
       <div class="shrink-0 border-b border-surface-200/80 bg-white dark:border-surface-800/60 dark:bg-surface-900">
-        <div class="flex items-center gap-1 overflow-x-auto scrollbar-none px-3 sm:px-5 py-2">
+        <div class="flex items-center gap-1 overflow-x-auto scrollbar-thin sm:scrollbar-none px-3 sm:px-5 py-2">
           <button
             v-for="status in PIPELINE_STATUSES"
             :key="`tab-${status}`"
@@ -1304,12 +1315,11 @@ function closeDocPreview() {
       <!-- ═══════════════════════════════════════ -->
       <!-- THREE-PANEL LAYOUT                       -->
       <!-- ═══════════════════════════════════════ -->
-      <div class="flex flex-1 overflow-hidden">
+      <div class="flex flex-1 min-h-0 overflow-hidden">
 
-        <!-- LEFT PANEL — Candidate list -->
+        <!-- LEFT PANEL — Candidate list (desktop only; mobile uses bottom bar) -->
         <div
-          class="flex flex-col border-r border-surface-200/80 bg-white dark:border-surface-800/60 dark:bg-surface-900"
-          :class="showMobileDetail ? 'hidden md:flex md:w-72 md:shrink-0' : 'w-full md:w-72 md:shrink-0'"
+          class="hidden md:flex md:w-72 md:shrink-0 flex-col border-r border-surface-200/80 bg-white dark:border-surface-800/60 dark:bg-surface-900"
         >
           <!-- Search + Sort + Filter controls -->
           <div class="shrink-0 px-3.5 pt-3 pb-2 space-y-2 dark:border-surface-800">
@@ -1465,7 +1475,7 @@ function closeDocPreview() {
           </div>
 
           <!-- Scrollable list -->
-          <div class="flex-1 overflow-y-auto border-t border-surface-100 dark:border-surface-800/60">
+          <div class="flex-1 overflow-y-auto scrollbar-thin border-t border-surface-100 dark:border-surface-800/60">
             <div v-if="filteredApplications.length === 0" class="p-8 text-center">
               <div class="flex size-12 items-center justify-center rounded-xl bg-surface-100 dark:bg-surface-800/60 mx-auto mb-3">
                 <UserRound class="size-5 text-surface-400 dark:text-surface-500" />
@@ -1532,16 +1542,7 @@ function closeDocPreview() {
         <!-- CENTER PANEL — Candidate detail -->
         <div
           class="flex flex-1 flex-col overflow-hidden"
-          :class="showMobileDetail ? 'flex' : 'hidden md:flex'"
         >
-          <!-- Mobile back button -->
-          <button
-            class="md:hidden flex items-center gap-2 px-4 py-2.5 border-b border-surface-200/80 dark:border-surface-800/60 bg-white dark:bg-surface-900 text-sm font-medium text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 transition-colors"
-            @click="showMobileDetail = false"
-          >
-            <ArrowLeft class="size-4" />
-            Back to candidates
-          </button>
 
           <!-- Empty state -->
           <div
@@ -1578,7 +1579,7 @@ function closeDocPreview() {
             </div>
 
             <!-- Scrollable container: header + tabs + content -->
-            <div ref="detailScrollContainer" class="flex-1 overflow-y-auto">
+            <div ref="detailScrollContainer" class="flex-1 overflow-y-auto scrollbar-thin pb-20 md:pb-0">
 
             <!-- Candidate header -->
             <div class="border-b border-surface-200 bg-surface-50 px-4 sm:px-6 py-4 sm:py-6 dark:border-surface-800 dark:bg-surface-900/80">
@@ -2298,6 +2299,77 @@ function closeDocPreview() {
 
 
       </div>
+
+      <!-- ═══════════════════════════════════════ -->
+      <!-- MOBILE BOTTOM CANDIDATE BAR              -->
+      <!-- ═══════════════════════════════════════ -->
+      <div
+        v-if="filteredApplications.length > 0"
+        class="md:hidden fixed bottom-0 left-0 right-0 z-30 border-t border-surface-200/80 bg-white dark:border-surface-800/60 dark:bg-surface-900"
+        :style="{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }"
+      >
+        <!-- Horizontal scrollable candidate cards -->
+        <div
+          ref="mobileBottomBar"
+          class="flex items-stretch gap-2 overflow-x-auto snap-x snap-mandatory px-3 py-2.5 scrollbar-thin"
+        >
+          <button
+            v-for="(app, idx) in filteredApplications"
+            :key="app.id"
+            :data-candidate-idx="idx"
+            class="snap-center shrink-0 flex items-center gap-2.5 rounded-xl px-3 py-2 min-w-[130px] max-w-[180px] transition-all duration-150 cursor-pointer"
+            :class="currentIndex === idx
+              ? 'bg-brand-50 ring-2 ring-brand-500 shadow-sm dark:bg-brand-950/30 dark:ring-brand-400'
+              : 'bg-surface-50 ring-1 ring-surface-200 hover:ring-surface-300 dark:bg-surface-800/60 dark:ring-surface-700 dark:hover:ring-surface-600'"
+            @click="currentIndex = idx"
+          >
+            <div
+              class="flex size-8 shrink-0 items-center justify-center rounded-full text-[10px] font-bold transition-colors duration-150"
+              :class="currentIndex === idx
+                ? 'bg-brand-500 text-white dark:bg-brand-600'
+                : 'bg-surface-200 text-surface-600 dark:bg-surface-700 dark:text-surface-300'"
+            >
+              {{ getCandidateInitials(app.candidateFirstName, app.candidateLastName) }}
+            </div>
+            <div class="min-w-0 text-left">
+              <p class="text-xs font-medium text-surface-800 dark:text-surface-100 truncate">
+                {{ app.candidateFirstName }}
+              </p>
+              <div class="flex items-center gap-1 mt-0.5">
+                <span
+                  v-if="app.score != null"
+                  class="text-[10px] font-semibold"
+                  :class="{
+                    'text-success-600 dark:text-success-400': app.score >= 75,
+                    'text-warning-600 dark:text-warning-400': app.score >= 40 && app.score < 75,
+                    'text-danger-600 dark:text-danger-400': app.score < 40,
+                  }"
+                >
+                  {{ app.score }}pts
+                </span>
+                <span class="text-[10px] text-surface-400 dark:text-surface-500">{{ timeAgo(app.createdAt) }}</span>
+              </div>
+            </div>
+          </button>
+        </div>
+        <!-- Position indicator -->
+        <div class="flex items-center justify-center pb-1.5">
+          <span class="text-[10px] font-medium text-surface-400 dark:text-surface-500 tabular-nums">
+            {{ currentIndex + 1 }} / {{ filteredApplications.length }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Mobile empty state for bottom bar -->
+      <div
+        v-else-if="focusedApplications.length === 0"
+        class="md:hidden fixed bottom-0 left-0 right-0 z-30 border-t border-surface-200/80 bg-white dark:border-surface-800/60 dark:bg-surface-900 px-4 py-3 text-center"
+        :style="{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }"
+      >
+        <p class="text-xs text-surface-400 dark:text-surface-500">
+          No candidates in {{ formatStatusLabel(focusStatus) }}
+        </p>
+      </div>
     </template>
 
     <!-- ═══════════════════════════════════════ -->
diff --git a/app/pages/dashboard/settings.vue b/app/pages/dashboard/settings.vue
index 019d749..e16abba 100644
--- a/app/pages/dashboard/settings.vue
+++ b/app/pages/dashboard/settings.vue
@@ -2,40 +2,33 @@
 import { AlertTriangle } from 'lucide-vue-next'
 
 definePageMeta({
-  layout: 'dashboard',
+  layout: 'settings',
   middleware: ['auth', 'require-org'],
 })
 </script>
 
 <template>
-  <div class="flex min-w-0 flex-1 -mx-4 -my-6 sm:-mx-6 lg:-mx-8 lg:-my-8">
-    <div class="sticky top-14 h-[calc(100vh-3.5rem)] shrink-0">
-      <SettingsSidebar />
-    </div>
-    <div class="flex-1 min-w-0 px-6 py-6 lg:px-8 lg:py-8">
-      <NuxtErrorBoundary>
-        <NuxtPage />
+  <NuxtErrorBoundary>
+    <NuxtPage />
 
-        <template #error="{ error, clearError }">
-          <div class="mx-auto max-w-2xl mt-8">
-            <div class="rounded-xl border border-danger-200 dark:border-danger-900 bg-danger-50/50 dark:bg-danger-950/30 p-6">
-              <div class="flex items-center gap-3 mb-3">
-                <AlertTriangle class="size-5 text-danger-500" />
-                <h2 class="text-base font-semibold text-danger-700 dark:text-danger-300">Something went wrong</h2>
-              </div>
-              <p class="text-sm text-surface-600 dark:text-surface-400 mb-4">
-                {{ error?.message || 'An unexpected error occurred while loading this page.' }}
-              </p>
-              <button
-                class="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 transition-colors"
-                @click="clearError"
-              >
-                Try again
-              </button>
-            </div>
+    <template #error="{ error, clearError }">
+      <div class="mx-auto max-w-2xl mt-8">
+        <div class="rounded-xl border border-danger-200 dark:border-danger-900 bg-danger-50/50 dark:bg-danger-950/30 p-6">
+          <div class="flex items-center gap-3 mb-3">
+            <AlertTriangle class="size-5 text-danger-500" />
+            <h2 class="text-base font-semibold text-danger-700 dark:text-danger-300">Something went wrong</h2>
           </div>
-        </template>
-      </NuxtErrorBoundary>
-    </div>
-  </div>
+          <p class="text-sm text-surface-600 dark:text-surface-400 mb-4">
+            {{ error?.message || 'An unexpected error occurred while loading this page.' }}
+          </p>
+          <button
+            class="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 transition-colors"
+            @click="clearError"
+          >
+            Try again
+          </button>
+        </div>
+      </div>
+    </template>
+  </NuxtErrorBoundary>
 </template>
diff --git a/app/pages/dashboard/settings/account.vue b/app/pages/dashboard/settings/account.vue
index 35bc756..ad56d07 100644
--- a/app/pages/dashboard/settings/account.vue
+++ b/app/pages/dashboard/settings/account.vue
@@ -136,9 +136,9 @@ function getInitials(name: string | undefined): string {
 
     <!-- Profile section -->
     <section class="rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-      <div class="px-6 py-5 border-b border-surface-200 dark:border-surface-800">
+      <div class="px-4 sm:px-6 py-5 border-b border-surface-200 dark:border-surface-800">
         <div class="flex items-center gap-3">
-          <div class="flex items-center justify-center size-10 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
+          <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
             <User class="size-5" />
           </div>
           <div>
@@ -148,7 +148,7 @@ function getInitials(name: string | undefined): string {
         </div>
       </div>
 
-      <div class="px-6 py-5 space-y-5">
+      <div class="px-4 sm:px-6 py-5 space-y-5">
         <!-- Avatar row -->
         <div class="flex items-center gap-4">
           <div v-if="session?.user?.image" class="size-16 rounded-full overflow-hidden ring-2 ring-surface-200 dark:ring-surface-700">
@@ -233,9 +233,9 @@ function getInitials(name: string | undefined): string {
 
     <!-- Password section -->
     <section class="mt-8 rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-      <div class="px-6 py-5 border-b border-surface-200 dark:border-surface-800">
+      <div class="px-4 sm:px-6 py-5 border-b border-surface-200 dark:border-surface-800">
         <div class="flex items-center gap-3">
-          <div class="flex items-center justify-center size-10 rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400">
+          <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400">
             <KeyRound class="size-5" />
           </div>
           <div>
@@ -245,7 +245,7 @@ function getInitials(name: string | undefined): string {
         </div>
       </div>
 
-      <div class="px-6 py-5 space-y-5">
+      <div class="px-4 sm:px-6 py-5 space-y-5">
         <!-- Current password -->
         <div>
           <label for="current-password" class="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-1.5">
@@ -374,9 +374,9 @@ function getInitials(name: string | undefined): string {
 
     <!-- Session info -->
     <section class="mt-8 rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-      <div class="px-6 py-5 border-b border-surface-200 dark:border-surface-800">
+      <div class="px-4 sm:px-6 py-5 border-b border-surface-200 dark:border-surface-800">
         <div class="flex items-center gap-3">
-          <div class="flex items-center justify-center size-10 rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400">
+          <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400">
             <Calendar class="size-5" />
           </div>
           <div>
@@ -386,7 +386,7 @@ function getInitials(name: string | undefined): string {
         </div>
       </div>
 
-      <div class="px-6 py-5">
+      <div class="px-4 sm:px-6 py-5">
         <dl class="space-y-3">
           <div class="flex items-center justify-between">
             <dt class="text-sm text-surface-500 dark:text-surface-400">Session ID</dt>
diff --git a/app/pages/dashboard/settings/ai.vue b/app/pages/dashboard/settings/ai.vue
index 42f4f6f..183486e 100644
--- a/app/pages/dashboard/settings/ai.vue
+++ b/app/pages/dashboard/settings/ai.vue
@@ -164,9 +164,9 @@ async function handleSave() {
     <form v-else @submit.prevent="handleSave">
       <!-- Provider & Model section -->
       <section class="rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-        <div class="px-6 py-5 border-b border-surface-200 dark:border-surface-800">
+        <div class="px-4 sm:px-6 py-5 border-b border-surface-200 dark:border-surface-800">
           <div class="flex items-center gap-3">
-            <div class="flex items-center justify-center size-10 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
+            <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
               <Brain class="size-5" />
             </div>
             <div>
@@ -176,7 +176,7 @@ async function handleSave() {
           </div>
         </div>
 
-        <div class="px-6 py-5 space-y-5">
+        <div class="px-4 sm:px-6 py-5 space-y-5">
           <!-- Provider -->
           <div>
             <label for="ai-provider" class="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-1.5">
@@ -275,9 +275,9 @@ async function handleSave() {
 
       <!-- Pricing section -->
       <section class="mt-8 rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-        <div class="px-6 py-5 border-b border-surface-200 dark:border-surface-800">
+        <div class="px-4 sm:px-6 py-5 border-b border-surface-200 dark:border-surface-800">
           <div class="flex items-center gap-3">
-            <div class="flex items-center justify-center size-10 rounded-lg bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400">
+            <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400">
               <DollarSign class="size-5" />
             </div>
             <div>
@@ -287,8 +287,8 @@ async function handleSave() {
           </div>
         </div>
 
-        <div class="px-6 py-5 space-y-5">
-          <div class="grid grid-cols-2 gap-4">
+        <div class="px-4 sm:px-6 py-5 space-y-5">
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label for="ai-input-price" class="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-1.5">
                 Input price <span class="text-surface-400 font-normal">/ 1M tokens</span>
@@ -334,28 +334,30 @@ async function handleSave() {
 
       <!-- API Key section -->
       <section class="mt-8 rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-        <div class="px-6 py-5 border-b border-surface-200 dark:border-surface-800">
-          <div class="flex items-center gap-3">
-            <div class="flex items-center justify-center size-10 rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400">
-              <Shield class="size-5" />
-            </div>
-            <div>
-              <h2 class="text-base font-semibold text-surface-900 dark:text-surface-100">API Key</h2>
-              <p class="text-sm text-surface-500 dark:text-surface-400">Your key is encrypted at rest using AES-256-GCM.</p>
+        <div class="px-4 sm:px-6 py-5 border-b border-surface-200 dark:border-surface-800">
+          <div class="flex flex-col sm:flex-row sm:items-center gap-3">
+            <div class="flex items-center gap-3 flex-1 min-w-0">
+              <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400">
+                <Shield class="size-5" />
+              </div>
+              <div class="min-w-0">
+                <h2 class="text-base font-semibold text-surface-900 dark:text-surface-100">API Key</h2>
+                <p class="text-sm text-surface-500 dark:text-surface-400">Your key is encrypted at rest using AES-256-GCM.</p>
+              </div>
             </div>
             <a
               v-if="providerApiKeyUrl"
               :href="providerApiKeyUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="ml-auto inline-flex items-center gap-1 text-xs text-brand-600 dark:text-brand-400 hover:underline"
+              class="inline-flex items-center gap-1 text-xs text-brand-600 dark:text-brand-400 hover:underline shrink-0"
             >
               Get API key <ExternalLink class="size-3" />
             </a>
           </div>
         </div>
 
-        <div class="px-6 py-5 space-y-5">
+        <div class="px-4 sm:px-6 py-5 space-y-5">
           <div v-if="hasExistingKey" class="flex items-center gap-2 text-xs text-success-600 dark:text-success-400 bg-success-50 dark:bg-success-950/40 border border-success-200 dark:border-success-900 rounded-lg px-3 py-2">
             <Check class="size-3.5" />
             API key is configured and encrypted.
diff --git a/app/pages/dashboard/settings/index.vue b/app/pages/dashboard/settings/index.vue
index 1eb108c..f67ae2a 100644
--- a/app/pages/dashboard/settings/index.vue
+++ b/app/pages/dashboard/settings/index.vue
@@ -126,9 +126,9 @@ async function handleDeleteOrg() {
 
     <!-- Organization profile -->
     <section class="rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-      <div class="px-6 py-5 border-b border-surface-200 dark:border-surface-800">
+      <div class="px-4 sm:px-6 py-5 border-b border-surface-200 dark:border-surface-800">
         <div class="flex items-center gap-3">
-          <div class="flex items-center justify-center size-10 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
+          <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
             <Building2 class="size-5" />
           </div>
           <div>
@@ -138,7 +138,7 @@ async function handleDeleteOrg() {
         </div>
       </div>
 
-      <div class="px-6 py-5 space-y-5">
+      <div class="px-4 sm:px-6 py-5 space-y-5">
         <div>
           <label for="org-name" class="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-1.5">
             Organization name
@@ -210,9 +210,9 @@ async function handleDeleteOrg() {
 
     <!-- Danger zone -->
     <section v-if="canDeleteOrg" class="mt-8 rounded-xl border border-danger-200 dark:border-danger-900 bg-white dark:bg-surface-900 overflow-hidden">
-      <div class="px-6 py-5 border-b border-danger-200 dark:border-danger-900 bg-danger-50/50 dark:bg-danger-950/20">
+      <div class="px-4 sm:px-6 py-5 border-b border-danger-200 dark:border-danger-900 bg-danger-50/50 dark:bg-danger-950/20">
         <div class="flex items-center gap-3">
-          <div class="flex items-center justify-center size-10 rounded-lg bg-danger-100 dark:bg-danger-950 text-danger-600 dark:text-danger-400">
+          <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-danger-100 dark:bg-danger-950 text-danger-600 dark:text-danger-400">
             <AlertTriangle class="size-5" />
           </div>
           <div>
@@ -222,8 +222,8 @@ async function handleDeleteOrg() {
         </div>
       </div>
 
-      <div class="px-6 py-5">
-        <div class="flex items-start justify-between gap-4">
+      <div class="px-4 sm:px-6 py-5">
+        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
           <div>
             <h3 class="text-sm font-semibold text-surface-900 dark:text-surface-100">Delete organization</h3>
             <p class="text-sm text-surface-500 dark:text-surface-400 mt-0.5">
diff --git a/app/pages/dashboard/settings/integrations.vue b/app/pages/dashboard/settings/integrations.vue
index b73f4fc..7f47d77 100644
--- a/app/pages/dashboard/settings/integrations.vue
+++ b/app/pages/dashboard/settings/integrations.vue
@@ -112,7 +112,7 @@ async function handleDisconnect() {
     <!-- Google Calendar Integration Card -->
     <div class="rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
       <!-- Header -->
-      <div class="flex items-center gap-4 px-6 py-5 border-b border-surface-100 dark:border-surface-800">
+      <div class="flex items-center gap-4 px-4 sm:px-6 py-5 border-b border-surface-100 dark:border-surface-800">
         <div class="flex items-center justify-center size-10 rounded-lg bg-brand-50 dark:bg-brand-950/40">
           <Calendar class="size-5 text-brand-600 dark:text-brand-400" />
         </div>
@@ -142,7 +142,7 @@ async function handleDisconnect() {
       </div>
 
       <!-- Body -->
-      <div class="px-6 py-5">
+      <div class="px-4 sm:px-6 py-5">
         <!-- Loading state -->
         <div v-if="status === 'pending'" class="flex items-center justify-center py-4">
           <Loader2 class="size-5 text-surface-400 animate-spin" />
diff --git a/app/pages/dashboard/settings/members.vue b/app/pages/dashboard/settings/members.vue
index 480907b..8892966 100644
--- a/app/pages/dashboard/settings/members.vue
+++ b/app/pages/dashboard/settings/members.vue
@@ -657,7 +657,7 @@ onUnmounted(() => {
 
     <!-- Pending invitations -->
     <section v-if="canInvite && (isLoadingInvitations || pendingInvitations.length > 0)" class="mb-6 rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-      <div class="px-6 py-4 border-b border-surface-200 dark:border-surface-800">
+      <div class="px-4 sm:px-6 py-4 border-b border-surface-200 dark:border-surface-800">
         <div class="flex items-center gap-3">
           <div class="flex items-center justify-center size-8 rounded-lg bg-warning-50 dark:bg-warning-950 text-warning-600 dark:text-warning-400">
             <Clock class="size-4" />
@@ -672,13 +672,13 @@ onUnmounted(() => {
       </div>
 
       <!-- Loading state -->
-      <div v-if="isLoadingInvitations" class="px-6 py-6 text-center text-surface-400 text-sm">
+      <div v-if="isLoadingInvitations" class="px-4 sm:px-6 py-6 text-center text-surface-400 text-sm">
         <Loader2 class="size-4 animate-spin mx-auto mb-1.5" />
         Loading invitations…
       </div>
 
       <!-- Error state -->
-      <div v-else-if="invitationsError" class="px-6 py-6 text-center">
+      <div v-else-if="invitationsError" class="px-4 sm:px-6 py-6 text-center">
         <AlertTriangle class="size-5 text-danger-400 mx-auto mb-1.5" />
         <p class="text-sm text-danger-600 dark:text-danger-400">{{ invitationsError }}</p>
         <button class="mt-1.5 text-sm text-brand-600 hover:text-brand-700 underline" @click="fetchInvitations">
@@ -691,40 +691,40 @@ onUnmounted(() => {
         <div
           v-for="inv in pendingInvitations"
           :key="inv.id"
-          class="px-6 py-3.5 flex items-center gap-4 hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors"
+          class="px-4 sm:px-6 py-3.5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors"
         >
-          <!-- Email icon -->
-          <div class="flex-shrink-0">
-            <div class="size-9 rounded-full bg-surface-100 dark:bg-surface-800 flex items-center justify-center text-surface-400 dark:text-surface-500">
-              <Mail class="size-4" />
-            </div>
-          </div>
-
-          <!-- Info -->
-          <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate">
-              <a
-                :href="`mailto:${inv.email}`"
-                target="_blank"
-                class="hover:text-brand-600 dark:hover:text-brand-400 hover:underline cursor-pointer transition-colors"
-              >{{ inv.email }}</a>
+          <!-- Email icon + Info -->
+          <div class="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
+            <div class="flex-shrink-0">
+              <div class="size-9 rounded-full bg-surface-100 dark:bg-surface-800 flex items-center justify-center text-surface-400 dark:text-surface-500">
+                <Mail class="size-4" />
+              </div>
             </div>
-            <div class="flex items-center gap-2 text-xs text-surface-400 dark:text-surface-500">
-              <span
-                :class="[getRoleConfig(inv.role).bg, getRoleConfig(inv.role).color]"
-                class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
-              >
-                <component :is="getRoleConfig(inv.role).icon" class="size-2.5" />
-                {{ getRoleConfig(inv.role).label }}
-              </span>
-              <span :class="isExpired(inv.expiresAt) ? 'text-danger-500' : ''">
-                {{ formatExpiresAt(inv.expiresAt) }}
-              </span>
+            <div class="min-w-0">
+              <div class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate">
+                <a
+                  :href="`mailto:${inv.email}`"
+                  target="_blank"
+                  class="hover:text-brand-600 dark:hover:text-brand-400 hover:underline cursor-pointer transition-colors"
+                >{{ inv.email }}</a>
+              </div>
+              <div class="flex items-center gap-2 text-xs text-surface-400 dark:text-surface-500">
+                <span
+                  :class="[getRoleConfig(inv.role).bg, getRoleConfig(inv.role).color]"
+                  class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+                >
+                  <component :is="getRoleConfig(inv.role).icon" class="size-2.5" />
+                  {{ getRoleConfig(inv.role).label }}
+                </span>
+                <span :class="isExpired(inv.expiresAt) ? 'text-danger-500' : ''">
+                  {{ formatExpiresAt(inv.expiresAt) }}
+                </span>
+              </div>
             </div>
           </div>
 
           <!-- Actions -->
-          <div v-if="canCancelInvite" class="flex items-center gap-1.5 flex-shrink-0">
+          <div v-if="canCancelInvite" class="flex items-center gap-1.5 flex-shrink-0 pl-12 sm:pl-0">
             <button
               :disabled="resendingInvitation === inv.id"
               class="inline-flex items-center gap-1.5 rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 px-3 py-1.5 text-xs font-medium text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -752,13 +752,13 @@ onUnmounted(() => {
 
     <!-- Invite links section -->
     <section v-if="canInvite" class="mb-6 rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-      <div class="px-6 py-4 border-b border-surface-200 dark:border-surface-800">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <div class="flex items-center justify-center size-8 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
+      <div class="px-4 sm:px-6 py-4 border-b border-surface-200 dark:border-surface-800">
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center gap-3 min-w-0">
+            <div class="flex items-center justify-center size-8 shrink-0 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
               <Link2 class="size-4" />
             </div>
-            <div>
+            <div class="min-w-0">
               <h2 class="text-sm font-semibold text-surface-900 dark:text-surface-100">Invite links</h2>
               <p class="text-xs text-surface-500 dark:text-surface-400">
                 Shareable links to join your organization
@@ -783,7 +783,7 @@ onUnmounted(() => {
         enter-from-class="opacity-0 -translate-y-2"
         leave-to-class="opacity-0 -translate-y-2"
       >
-        <div v-if="showCreateLinkForm" class="px-6 py-4 border-b border-surface-200 dark:border-surface-800 bg-surface-50 dark:bg-surface-800/50">
+        <div v-if="showCreateLinkForm" class="px-4 sm:px-6 py-4 border-b border-surface-200 dark:border-surface-800 bg-surface-50 dark:bg-surface-800/50">
           <div class="flex items-center justify-between mb-3">
             <h3 class="text-sm font-medium text-surface-900 dark:text-surface-100">New invite link</h3>
             <button
@@ -858,20 +858,20 @@ onUnmounted(() => {
         enter-from-class="opacity-0"
         leave-to-class="opacity-0"
       >
-        <div v-if="createLinkSuccess" class="px-6 py-2 flex items-center gap-2 text-sm text-success-600 dark:text-success-400 bg-success-50 dark:bg-success-950/40 border-b border-success-200 dark:border-success-900">
+        <div v-if="createLinkSuccess" class="px-4 sm:px-6 py-2 flex items-center gap-2 text-sm text-success-600 dark:text-success-400 bg-success-50 dark:bg-success-950/40 border-b border-success-200 dark:border-success-900">
           <Check class="size-4" />
           {{ createLinkSuccess }}
         </div>
       </Transition>
 
       <!-- Loading state -->
-      <div v-if="isLoadingLinks" class="px-6 py-6 text-center text-surface-400 text-sm">
+      <div v-if="isLoadingLinks" class="px-4 sm:px-6 py-6 text-center text-surface-400 text-sm">
         <Loader2 class="size-4 animate-spin mx-auto mb-1.5" />
         Loading invite links…
       </div>
 
       <!-- Error state -->
-      <div v-else-if="linksError" class="px-6 py-6 text-center">
+      <div v-else-if="linksError" class="px-4 sm:px-6 py-6 text-center">
         <AlertTriangle class="size-5 text-danger-400 mx-auto mb-1.5" />
         <p class="text-sm text-danger-600 dark:text-danger-400">{{ linksError }}</p>
         <button class="mt-1.5 text-sm text-brand-600 hover:text-brand-700 underline" @click="fetchInviteLinks">
@@ -880,7 +880,7 @@ onUnmounted(() => {
       </div>
 
       <!-- Empty state -->
-      <div v-else-if="inviteLinks.length === 0 && !showCreateLinkForm" class="px-6 py-6 text-center text-sm text-surface-400 dark:text-surface-500">
+      <div v-else-if="inviteLinks.length === 0 && !showCreateLinkForm" class="px-4 sm:px-6 py-6 text-center text-sm text-surface-400 dark:text-surface-500">
         No active invite links. Create one to share with your team.
       </div>
 
@@ -889,38 +889,40 @@ onUnmounted(() => {
         <div
           v-for="link in inviteLinks"
           :key="link.id"
-          class="px-6 py-3.5 flex items-center gap-4 hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors"
+          class="px-4 sm:px-6 py-3.5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors"
           :class="{ 'opacity-50': !isLinkActive(link) }"
         >
-          <div class="flex-shrink-0">
-            <div class="size-9 rounded-full flex items-center justify-center"
-              :class="isLinkActive(link) ? 'bg-brand-100 dark:bg-brand-950 text-brand-600 dark:text-brand-400' : 'bg-surface-100 dark:bg-surface-800 text-surface-400'"
-            >
-              <Link2 class="size-4" />
-            </div>
-          </div>
-
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 text-sm font-medium text-surface-900 dark:text-surface-100">
-              <span
-                :class="[getRoleConfig(link.role).bg, getRoleConfig(link.role).color]"
-                class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+          <div class="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
+            <div class="flex-shrink-0">
+              <div class="size-9 rounded-full flex items-center justify-center"
+                :class="isLinkActive(link) ? 'bg-brand-100 dark:bg-brand-950 text-brand-600 dark:text-brand-400' : 'bg-surface-100 dark:bg-surface-800 text-surface-400'"
               >
-                <component :is="getRoleConfig(link.role).icon" class="size-2.5" />
-                {{ getRoleConfig(link.role).label }}
-              </span>
-              <span v-if="!isLinkActive(link)" class="text-xs text-danger-500">Inactive</span>
+                <Link2 class="size-4" />
+              </div>
             </div>
-            <div class="flex items-center gap-3 text-xs text-surface-400 dark:text-surface-500 mt-0.5">
-              <span>{{ link.useCount }}{{ link.maxUses ? `/${link.maxUses}` : '' }} uses</span>
-              <span :class="isExpired(link.expiresAt) ? 'text-danger-500' : ''">
-                {{ formatExpiresAt(link.expiresAt) }}
-              </span>
-              <span v-if="link.createdByName">by {{ link.createdByName }}</span>
+
+            <div class="min-w-0">
+              <div class="flex items-center gap-2 text-sm font-medium text-surface-900 dark:text-surface-100">
+                <span
+                  :class="[getRoleConfig(link.role).bg, getRoleConfig(link.role).color]"
+                  class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+                >
+                  <component :is="getRoleConfig(link.role).icon" class="size-2.5" />
+                  {{ getRoleConfig(link.role).label }}
+                </span>
+                <span v-if="!isLinkActive(link)" class="text-xs text-danger-500">Inactive</span>
+              </div>
+              <div class="flex items-center gap-3 text-xs text-surface-400 dark:text-surface-500 mt-0.5">
+                <span>{{ link.useCount }}{{ link.maxUses ? `/${link.maxUses}` : '' }} uses</span>
+                <span :class="isExpired(link.expiresAt) ? 'text-danger-500' : ''">
+                  {{ formatExpiresAt(link.expiresAt) }}
+                </span>
+                <span v-if="link.createdByName">by {{ link.createdByName }}</span>
+              </div>
             </div>
           </div>
 
-          <div class="flex items-center gap-1.5 flex-shrink-0">
+          <div class="flex items-center gap-1.5 flex-shrink-0 pl-12 sm:pl-0">
             <button
               v-if="isLinkActive(link)"
               class="inline-flex items-center gap-1.5 rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 px-3 py-1.5 text-xs font-medium text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-700 transition-colors"
@@ -948,7 +950,7 @@ onUnmounted(() => {
 
     <!-- Join requests section -->
     <section v-if="canInvite && (isLoadingJoinRequests || joinRequests.length > 0)" class="mb-6 rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 overflow-hidden">
-      <div class="px-6 py-4 border-b border-surface-200 dark:border-surface-800">
+      <div class="px-4 sm:px-6 py-4 border-b border-surface-200 dark:border-surface-800">
         <div class="flex items-center gap-3">
           <div class="flex items-center justify-center size-8 rounded-lg bg-warning-50 dark:bg-warning-950 text-warning-600 dark:text-warning-400">
             <UserCheck class="size-4" />
@@ -963,7 +965,7 @@ onUnmounted(() => {
       </div>
 
       <!-- Join request action error -->
-      <div v-if="joinRequestActionError" class="px-6 py-2 flex items-center justify-between text-sm text-danger-700 dark:text-danger-400 bg-danger-50 dark:bg-danger-950/40 border-b border-danger-200 dark:border-danger-900">
+      <div v-if="joinRequestActionError" class="px-4 sm:px-6 py-2 flex items-center justify-between text-sm text-danger-700 dark:text-danger-400 bg-danger-50 dark:bg-danger-950/40 border-b border-danger-200 dark:border-danger-900">
         <span>{{ joinRequestActionError }}</span>
         <button class="text-danger-500 hover:text-danger-700 transition-colors" @click="joinRequestActionError = ''">
           <X class="size-4" />
@@ -971,13 +973,13 @@ onUnmounted(() => {
       </div>
 
       <!-- Loading state -->
-      <div v-if="isLoadingJoinRequests" class="px-6 py-6 text-center text-surface-400 text-sm">
+      <div v-if="isLoadingJoinRequests" class="px-4 sm:px-6 py-6 text-center text-surface-400 text-sm">
         <Loader2 class="size-4 animate-spin mx-auto mb-1.5" />
         Loading join requests…
       </div>
 
       <!-- Error state -->
-      <div v-else-if="joinRequestsError" class="px-6 py-6 text-center">
+      <div v-else-if="joinRequestsError" class="px-4 sm:px-6 py-6 text-center">
         <AlertTriangle class="size-5 text-danger-400 mx-auto mb-1.5" />
         <p class="text-sm text-danger-600 dark:text-danger-400">{{ joinRequestsError }}</p>
         <button class="mt-1.5 text-sm text-brand-600 hover:text-brand-700 underline" @click="fetchJoinRequests">
@@ -990,37 +992,38 @@ onUnmounted(() => {
         <div
           v-for="req in joinRequests"
           :key="req.id"
-          class="px-6 py-3.5 flex items-center gap-4 hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors"
+          class="px-4 sm:px-6 py-3.5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors"
         >
-          <!-- Avatar -->
-          <div class="flex-shrink-0">
-            <img
-              v-if="req.userImage"
-              :src="req.userImage"
-              :alt="req.userName"
-              class="size-9 rounded-full object-cover ring-2 ring-surface-100 dark:ring-surface-800"
-            />
-            <div v-else class="size-9 rounded-full bg-brand-100 dark:bg-brand-900 flex items-center justify-center text-xs font-semibold text-brand-700 dark:text-brand-300 ring-2 ring-surface-100 dark:ring-surface-800">
-              {{ req.userName?.split(' ').slice(0, 2).map((w: string) => w[0]).join('').toUpperCase() || '?' }}
+          <!-- Avatar + Info -->
+          <div class="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
+            <div class="flex-shrink-0">
+              <img
+                v-if="req.userImage"
+                :src="req.userImage"
+                :alt="req.userName"
+                class="size-9 rounded-full object-cover ring-2 ring-surface-100 dark:ring-surface-800"
+              />
+              <div v-else class="size-9 rounded-full bg-brand-100 dark:bg-brand-900 flex items-center justify-center text-xs font-semibold text-brand-700 dark:text-brand-300 ring-2 ring-surface-100 dark:ring-surface-800">
+                {{ req.userName?.split(' ').slice(0, 2).map((w: string) => w[0]).join('').toUpperCase() || '?' }}
+              </div>
             </div>
-          </div>
 
-          <!-- Info -->
-          <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate">
-              {{ req.userName }}
-            </div>
-            <div class="text-xs text-surface-500 dark:text-surface-400 truncate">
-              {{ req.userEmail }}
-            </div>
-            <div v-if="req.message" class="mt-1 text-xs text-surface-500 dark:text-surface-400 italic flex items-start gap-1">
-              <MessageSquare class="size-3 mt-0.5 flex-shrink-0" />
-              <span class="truncate">"{{ req.message }}"</span>
+            <div class="flex-1 min-w-0">
+              <div class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate">
+                {{ req.userName }}
+              </div>
+              <div class="text-xs text-surface-500 dark:text-surface-400 truncate">
+                {{ req.userEmail }}
+              </div>
+              <div v-if="req.message" class="mt-1 text-xs text-surface-500 dark:text-surface-400 italic flex items-start gap-1">
+                <MessageSquare class="size-3 mt-0.5 flex-shrink-0" />
+                <span class="truncate">"{{ req.message }}"</span>
+              </div>
             </div>
           </div>
 
           <!-- Actions -->
-          <div class="flex items-center gap-1.5 flex-shrink-0">
+          <div class="flex items-center gap-1.5 flex-shrink-0 pl-12 sm:pl-0">
             <button
               :disabled="approvingRequestId === req.id"
               class="inline-flex items-center gap-1.5 rounded-lg bg-success-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-success-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -1048,10 +1051,10 @@ onUnmounted(() => {
 
     <!-- Members list -->
     <section class="rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900">
-      <div class="px-6 py-5 border-b border-surface-200 dark:border-surface-800">
-        <div class="flex items-center justify-between">
+      <div class="px-4 sm:px-6 py-5 border-b border-surface-200 dark:border-surface-800">
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
           <div class="flex items-center gap-3">
-            <div class="flex items-center justify-center size-10 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
+            <div class="flex items-center justify-center size-10 shrink-0 rounded-lg bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">
               <Users class="size-5" />
             </div>
             <div>
@@ -1062,24 +1065,27 @@ onUnmounted(() => {
             </div>
           </div>
           <div v-if="!isLoadingMembers && members.length > 5" class="flex-shrink-0">
-            <input
-              v-model="memberSearch"
-              type="text"
-              placeholder="Search members…"
-              class="w-48 rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 px-3 py-1.5 text-sm text-surface-900 dark:text-surface-100 placeholder:text-surface-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors"
-            />
+            <div class="relative">
+              <Search class="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-surface-400 pointer-events-none" />
+              <input
+                v-model="memberSearch"
+                type="text"
+                placeholder="Search members…"
+                class="w-full sm:w-48 rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 pl-8.5 pr-3 py-1.5 text-sm text-surface-900 dark:text-surface-100 placeholder:text-surface-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors"
+              />
+            </div>
           </div>
         </div>
       </div>
 
       <!-- Loading state -->
-      <div v-if="isLoadingMembers" class="px-6 py-8 text-center text-surface-400 text-sm">
+      <div v-if="isLoadingMembers" class="px-4 sm:px-6 py-8 text-center text-surface-400 text-sm">
         <Loader2 class="size-5 animate-spin mx-auto mb-2" />
         Loading members…
       </div>
 
       <!-- Error state -->
-      <div v-else-if="membersError" class="px-6 py-8 text-center">
+      <div v-else-if="membersError" class="px-4 sm:px-6 py-8 text-center">
         <AlertTriangle class="size-6 text-danger-400 mx-auto mb-2" />
         <p class="text-sm text-danger-600 dark:text-danger-400">{{ membersError }}</p>
         <button class="mt-2 text-sm text-brand-600 hover:text-brand-700 underline" @click="fetchMembers">
@@ -1092,40 +1098,41 @@ onUnmounted(() => {
         <div
           v-for="m in visibleMembers"
           :key="m.id"
-          class="px-6 py-4 flex items-center gap-4 hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors"
+          class="px-4 sm:px-6 py-4 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 hover:bg-surface-50 dark:hover:bg-surface-800/50 transition-colors"
         >
-          <!-- Avatar -->
-          <div class="flex-shrink-0">
-            <img
-              v-if="m.user.image"
-              :src="m.user.image"
-              :alt="m.user.name"
-              class="size-10 rounded-full object-cover ring-2 ring-surface-100 dark:ring-surface-800"
-            />
-            <div v-else class="size-10 rounded-full bg-brand-100 dark:bg-brand-900 flex items-center justify-center text-sm font-semibold text-brand-700 dark:text-brand-300 ring-2 ring-surface-100 dark:ring-surface-800">
-              {{ getInitials(m.user.name) }}
+          <!-- Avatar + Info row -->
+          <div class="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
+            <div class="flex-shrink-0">
+              <img
+                v-if="m.user.image"
+                :src="m.user.image"
+                :alt="m.user.name"
+                class="size-10 rounded-full object-cover ring-2 ring-surface-100 dark:ring-surface-800"
+              />
+              <div v-else class="size-10 rounded-full bg-brand-100 dark:bg-brand-900 flex items-center justify-center text-sm font-semibold text-brand-700 dark:text-brand-300 ring-2 ring-surface-100 dark:ring-surface-800">
+                {{ getInitials(m.user.name) }}
+              </div>
             </div>
-          </div>
 
-          <!-- Info -->
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2">
-              <span class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate">
-                {{ m.user.name }}
-              </span>
-              <span v-if="isCurrentUser(m.userId)" class="text-xs text-surface-400 dark:text-surface-500">(you)</span>
-            </div>
-            <div class="text-sm text-surface-500 dark:text-surface-400 truncate">
-              <a
-                :href="`mailto:${m.user.email}`"
-                target="_blank"
-                class="hover:text-brand-600 dark:hover:text-brand-400 hover:underline cursor-pointer transition-colors"
-              >{{ m.user.email }}</a>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <span class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate">
+                  {{ m.user.name }}
+                </span>
+                <span v-if="isCurrentUser(m.userId)" class="text-xs text-surface-400 dark:text-surface-500">(you)</span>
+              </div>
+              <div class="text-sm text-surface-500 dark:text-surface-400 truncate">
+                <a
+                  :href="`mailto:${m.user.email}`"
+                  target="_blank"
+                  class="hover:text-brand-600 dark:hover:text-brand-400 hover:underline cursor-pointer transition-colors"
+                >{{ m.user.email }}</a>
+              </div>
             </div>
           </div>
 
-          <!-- Role badge -->
-          <div class="flex-shrink-0">
+          <!-- Role badge + Actions -->
+          <div class="flex items-center gap-2 pl-[3.25rem] sm:pl-0 flex-shrink-0">
             <span
               :class="[getRoleConfig(m.role).bg, getRoleConfig(m.role).color]"
               class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium"
@@ -1133,10 +1140,9 @@ onUnmounted(() => {
               <component :is="getRoleConfig(m.role).icon" class="size-3" />
               {{ getRoleConfig(m.role).label }}
             </span>
-          </div>
 
           <!-- Actions dropdown -->
-          <div v-if="canManageMembers && !isCurrentUser(m.userId) && m.role !== 'owner'" class="flex-shrink-0 relative" data-member-actions>
+          <div v-if="canManageMembers && !isCurrentUser(m.userId) && m.role !== 'owner'" class="relative" data-member-actions>
             <button
               class="p-1.5 rounded-md text-surface-400 hover:text-surface-600 dark:hover:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
               @click.stop="toggleDropdown(m.id)"
@@ -1197,10 +1203,11 @@ onUnmounted(() => {
           <div v-if="isUpdatingRole === m.id" class="flex-shrink-0">
             <Loader2 class="size-4 animate-spin text-brand-500" />
           </div>
+          </div>
         </div>
 
         <!-- Show more button -->
-        <div v-if="hasMoreMembers" class="px-6 py-3 text-center border-t border-surface-100 dark:border-surface-800">
+        <div v-if="hasMoreMembers" class="px-4 sm:px-6 py-3 text-center border-t border-surface-100 dark:border-surface-800">
           <button
             class="text-sm font-medium text-brand-600 dark:text-brand-400 hover:text-brand-700 dark:hover:text-brand-300 transition-colors"
             @click="showMoreMembers"

From d58db54ca84614c6e81a89039097a8446d90a4dc Mon Sep 17 00:00:00 2001
From: Joachim <joachim.l.kolle.pers@gmail.com>
Date: Mon, 23 Mar 2026 12:08:16 +0100
Subject: [PATCH 3/3] chore: update fast-xml-parser version in
 package-lock.json and set minimum version in package.json

---
 package-lock.json | 34 +++++++++++++++++-----------------
 package.json      |  2 +-
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6dc9d42..51c9a23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10223,9 +10223,9 @@
       }
     },
     "node_modules/fast-xml-parser": {
-      "version": "5.5.6",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.6.tgz",
-      "integrity": "sha512-3+fdZyBRVg29n4rXP0joHthhcHdPUHaIC16cuyyd1iLsuaO6Vea36MPrxgAzbZna8lhvZeRL8Bc9GP56/J9xEw==",
+      "version": "5.5.8",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.8.tgz",
+      "integrity": "sha512-Z7Fh2nVQSb2d+poDViM063ix2ZGt9jmY1nWhPfHBOK2Hgnb/OW3P4Et3P/81SEej0J7QbWtJqxO05h8QYfK7LQ==",
       "funding": [
         {
           "type": "github",
@@ -10235,8 +10235,8 @@
       "license": "MIT",
       "dependencies": {
         "fast-xml-builder": "^1.1.4",
-        "path-expression-matcher": "^1.1.3",
-        "strnum": "^2.1.2"
+        "path-expression-matcher": "^1.2.0",
+        "strnum": "^2.2.0"
       },
       "bin": {
         "fxparser": "src/cli/cli.js"
@@ -10399,9 +10399,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
-      "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "license": "ISC",
       "peer": true
     },
@@ -10860,9 +10860,9 @@
       }
     },
     "node_modules/h3": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/h3/-/h3-1.15.6.tgz",
-      "integrity": "sha512-oi15ESLW5LRthZ+qPCi5GNasY/gvynSKUQxgiovrY63bPAtG59wtM+LSrlcwvOHAXzGrXVLnI97brbkdPF9WoQ==",
+      "version": "1.15.10",
+      "resolved": "https://registry.npmjs.org/h3/-/h3-1.15.10.tgz",
+      "integrity": "sha512-YzJeWSkDZxAhvmp8dexjRK5hxziRO7I9m0N53WhvYL5NiWfkUkzssVzY9jvGu0HBoLFW6+duYmNSn6MaZBCCtg==",
       "license": "MIT",
       "dependencies": {
         "cookie-es": "^1.2.2",
@@ -11954,9 +11954,9 @@
       "license": "MIT"
     },
     "node_modules/kysely": {
-      "version": "0.28.11",
-      "resolved": "https://registry.npmjs.org/kysely/-/kysely-0.28.11.tgz",
-      "integrity": "sha512-zpGIFg0HuoC893rIjYX1BETkVWdDnzTzF5e0kWXJFg5lE0k1/LfNWBejrcnOFu8Q2Rfq/hTDTU7XLUM8QOrpzg==",
+      "version": "0.28.14",
+      "resolved": "https://registry.npmjs.org/kysely/-/kysely-0.28.14.tgz",
+      "integrity": "sha512-SU3lgh0rPvq7upc6vvdVrCsSMUG1h3ChvHVOY7wJ2fw4C9QEB7X3d5eyYEyULUX7UQtxZJtZXGuT6U2US72UYA==",
       "license": "MIT",
       "engines": {
         "node": ">=20.0.0"
@@ -15153,9 +15153,9 @@
       }
     },
     "node_modules/path-expression-matcher": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.1.3.tgz",
-      "integrity": "sha512-qdVgY8KXmVdJZRSS1JdEPOKPdTiEK/pi0RkcT2sw1RhXxohdujUlJFPuS1TSkevZ9vzd3ZlL7ULl1MHGTApKzQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.2.0.tgz",
+      "integrity": "sha512-DwmPWeFn+tq7TiyJ2CxezCAirXjFxvaiD03npak3cRjlP9+OjTmSy1EpIrEbh+l6JgUundniloMLDQ/6VTdhLQ==",
       "funding": [
         {
           "type": "github",
diff --git a/package.json b/package.json
index a095bbd..b7658b1 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "wait-on": "^9.0.4"
   },
   "overrides": {
-    "fast-xml-parser": "5.5.6",
+    "fast-xml-parser": ">=5.5.7",
     "tar": "7.5.11",
     "minimatch": ">=10.2.4",
     "glob": ">=13.0.6",