From ffb64078d833b2a68ba3c042bf05ad28946d6f76 Mon Sep 17 00:00:00 2001
From: Joel Wedemire <jwedemire@vancs.org>
Date: Sun, 19 Apr 2026 22:12:49 -0700
Subject: [PATCH] fix(mobile): add min-w-0/overflow-hidden to sidebar panes,
 truncate header text

Closes dashboard-ticketing #5: sidebar and group switcher overflowed on 375px viewport.
Adds min-w-0 to aside and inner content div, truncates header labels. Settings tab nav
already had overflow-x-auto with shrink-0 tabs; no additional changes needed there.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/js/Pages/Ticketing/Index.vue    | 36 +++++++--------
 resources/js/Pages/Ticketing/Settings.vue | 54 +++++++++++------------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/resources/js/Pages/Ticketing/Index.vue b/resources/js/Pages/Ticketing/Index.vue
index 220948f..05d7b06 100644
--- a/resources/js/Pages/Ticketing/Index.vue
+++ b/resources/js/Pages/Ticketing/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-screen overflow-hidden bg-gray-100 text-gray-900">
+  <div class="flex flex-col lg:flex-row h-screen overflow-hidden bg-gray-100 text-gray-900">
 
     <!-- Bootstrap / first-run state -->
     <div v-if="isBootstrap" class="flex flex-col items-center justify-center w-full h-full text-center px-6">
@@ -13,14 +13,14 @@
 
     <template v-else>
     <aside
-      class="w-full shrink-0 border-r border-gray-200 bg-white/90 backdrop-blur lg:flex lg:w-72 lg:flex-col"
+      class="min-w-0 w-full shrink-0 border-r border-gray-200 bg-white/90 backdrop-blur lg:flex lg:w-72 lg:flex-col overflow-y-auto lg:overflow-visible"
       :class="showSidebar ? 'flex flex-col' : 'hidden'"
     >
       <div class="border-b border-gray-200 p-5">
         <div class="flex items-center justify-between gap-3">
-          <div>
-            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-gray-400">Shared inbox</p>
-            <h1 class="mt-1 text-2xl font-semibold tracking-tight">Ticketing</h1>
+          <div class="min-w-0 overflow-hidden">
+            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-gray-400 truncate">Shared inbox</p>
+            <h1 class="mt-1 text-2xl font-semibold tracking-tight truncate">Ticketing</h1>
           </div>
           <div class="flex items-center gap-2">
             <button
@@ -40,7 +40,7 @@
         </div>
       </div>
 
-      <div class="flex-1 space-y-6 overflow-y-auto p-5">
+      <div class="flex-1 min-w-0 space-y-6 overflow-y-auto p-5">
         <section class="space-y-2">
           <label class="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Group switcher</label>
           <select
@@ -149,7 +149,7 @@
     </aside>
 
     <main
-      class="min-w-0 flex-1 border-r border-gray-200 bg-white xl:max-w-[34rem]"
+      class="min-w-0 w-full flex-1 border-r border-gray-200 bg-white xl:max-w-[34rem]"
       :class="showList ? 'flex' : 'hidden lg:flex'"
     >
       <div class="flex min-w-0 flex-1 flex-col">
@@ -242,9 +242,9 @@
             </div>
 
             <div class="flex shrink-0 flex-col items-end justify-between gap-3">
-              <div class="text-xs font-medium text-gray-500">{{ ticket.priority?.name || 'No priority' }}</div>
+              <div class="text-xs font-medium text-gray-500 truncate max-w-[7rem]">{{ ticket.priority?.name || 'No priority' }}</div>
               <div class="flex items-center gap-2">
-                <span class="text-[11px] uppercase tracking-[0.16em] text-gray-400">Assignee</span>
+                <span class="hidden sm:inline text-[11px] uppercase tracking-[0.16em] text-gray-400">Assignee</span>
                 <span
                   class="avatar-ring"
                   :class="ticket.assignee ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-200 text-gray-500'"
@@ -275,7 +275,7 @@
     </main>
 
     <section
-      class="min-w-0 flex-1 flex-col bg-gray-50"
+      class="min-w-0 w-full flex-1 flex-col bg-gray-50"
       :class="showDetail ? 'flex' : 'hidden lg:flex'"
     >
       <div v-if="!ticketDetail" class="flex h-full items-center justify-center p-8">
@@ -311,9 +311,9 @@
                 </span>
               </div>
 
-              <div class="mt-3 flex items-start gap-3">
-                <h3 class="min-w-0 flex-1 text-2xl font-semibold tracking-tight text-gray-900">{{ ticketDetail.title }}</h3>
-                <Link :href="route('ticketing.show', { ticket: ticketDetail.id })" class="text-sm font-medium text-indigo-600 transition hover:text-indigo-500">Open full page</Link>
+              <div class="mt-3 flex flex-wrap items-start gap-3">
+                <h3 class="min-w-0 flex-1 text-xl font-semibold tracking-tight text-gray-900 sm:text-2xl">{{ ticketDetail.title }}</h3>
+                <Link :href="route('ticketing.show', { ticket: ticketDetail.id })" class="shrink-0 text-sm font-medium text-indigo-600 transition hover:text-indigo-500">Open full page</Link>
               </div>
             </div>
           </div>
@@ -348,11 +348,11 @@
             </div>
           </div>
 
-          <div class="mt-4 flex flex-wrap items-center gap-3 text-sm text-gray-500">
-            <span>Group: <strong class="text-gray-700">{{ ticketDetail.group?.name || 'Unknown' }}</strong></span>
-            <span>•</span>
+          <div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-500">
+            <span class="truncate">Group: <strong class="text-gray-700">{{ ticketDetail.group?.name || 'Unknown' }}</strong></span>
+            <span aria-hidden="true" class="hidden sm:inline">•</span>
             <span>{{ ticketDetail.messages?.length || 0 }} messages</span>
-            <span>•</span>
+            <span aria-hidden="true">•</span>
             <span>{{ ticketDetail.attachments?.length || 0 }} attachments</span>
           </div>
 
@@ -450,7 +450,7 @@
               :placeholder="replyMode === 'internal' ? 'Internal note for agents only…' : 'Reply to the thread…'"
             ></textarea>
 
-            <div class="flex items-center justify-between gap-3">
+            <div class="flex flex-wrap items-center justify-between gap-3">
               <div class="text-xs text-gray-400">
                 {{ replyMode === 'internal' ? 'Only agents can see internal notes.' : 'Replies are visible in the ticket thread.' }}
               </div>
diff --git a/resources/js/Pages/Ticketing/Settings.vue b/resources/js/Pages/Ticketing/Settings.vue
index f784e4d..ff15d07 100644
--- a/resources/js/Pages/Ticketing/Settings.vue
+++ b/resources/js/Pages/Ticketing/Settings.vue
@@ -2,7 +2,7 @@
   <div class="max-w-5xl mx-auto py-8 px-4">
     <div class="mb-6">
       <Link :href="route('ticketing.index')" class="text-sm text-indigo-600 hover:underline">← Back to tickets</Link>
-      <h1 class="text-2xl font-bold text-gray-900 mt-2">Ticketing Settings</h1>
+      <h1 class="text-xl font-bold text-gray-900 mt-2 sm:text-2xl">Ticketing Settings</h1>
     </div>
 
     <div v-if="isBootstrap" class="mb-6 px-5 py-4 bg-amber-50 border border-amber-300 rounded-xl">
@@ -25,13 +25,13 @@
       {{ $page.props.errors.project }}
     </div>
 
-    <div class="flex gap-1 border-b border-gray-200 mb-6">
+    <div class="flex gap-1 border-b border-gray-200 mb-6 overflow-x-auto scrollbar-none -mx-4 px-4 sm:mx-0 sm:px-0">
       <button
         v-for="tab in tabs"
         :key="tab.key"
         @click="activeTab = tab.key"
         :class="[
-          'px-4 py-2.5 text-sm font-medium border-b-2 transition',
+          'shrink-0 px-4 py-2.5 text-sm font-medium border-b-2 transition',
           activeTab === tab.key
             ? 'border-indigo-600 text-indigo-600'
             : 'border-transparent text-gray-500 hover:text-gray-700'
@@ -40,7 +40,7 @@
     </div>
 
     <div v-if="activeTab === 'groups'">
-      <div class="flex justify-between items-center mb-4">
+      <div class="flex flex-wrap justify-between items-center gap-2 mb-4">
         <h2 class="text-lg font-semibold text-gray-800">Groups</h2>
         <button @click="showAddGroup = !showAddGroup" class="text-sm text-indigo-600 hover:underline">
           {{ showAddGroup ? 'Cancel' : '+ Add Group' }}
@@ -49,7 +49,7 @@
 
       <div v-if="showAddGroup" class="bg-gray-50 rounded-xl p-4 mb-5 space-y-3">
         <h3 class="text-sm font-semibold text-gray-700">New Group</h3>
-        <form @submit.prevent="submitGroup" class="grid grid-cols-2 gap-3">
+        <form @submit.prevent="submitGroup" class="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
             <label class="block text-xs text-gray-500 mb-1">Name</label>
             <input v-model="groupForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
@@ -66,7 +66,7 @@
             <label class="block text-xs text-gray-500 mb-1">Color</label>
             <input v-model="groupForm.color" type="color" class="h-9 w-full border-gray-300 rounded-lg cursor-pointer" />
           </div>
-          <div class="col-span-2 flex justify-end">
+          <div class="col-span-1 sm:col-span-2 flex justify-end">
             <button type="submit" :disabled="groupForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">
               Create Group
             </button>
@@ -94,7 +94,7 @@
 
       <div v-if="editingGroup" class="mt-4 bg-gray-50 rounded-xl p-4 space-y-3">
         <h3 class="text-sm font-semibold text-gray-700">Edit: {{ editingGroup.name }}</h3>
-        <form @submit.prevent="submitEditGroup" class="grid grid-cols-2 gap-3">
+        <form @submit.prevent="submitEditGroup" class="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
             <label class="block text-xs text-gray-500 mb-1">Name</label>
             <input v-model="editGroupForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
@@ -111,7 +111,7 @@
             <label class="block text-xs text-gray-500 mb-1">Color</label>
             <input v-model="editGroupForm.color" type="color" class="h-9 w-full border-gray-300 rounded-lg cursor-pointer" />
           </div>
-          <div class="col-span-2 flex justify-end gap-2">
+          <div class="col-span-1 sm:col-span-2 flex justify-end gap-2">
             <button type="button" @click="editingGroup = null" class="text-sm text-gray-500 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
             <button type="submit" :disabled="editGroupForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">Save</button>
           </div>
@@ -120,7 +120,7 @@
     </div>
 
     <div v-if="activeTab === 'agents'">
-      <div class="flex justify-between items-center mb-4">
+      <div class="flex flex-wrap justify-between items-center gap-2 mb-4">
         <h2 class="text-lg font-semibold text-gray-800">Agents</h2>
         <button @click="showAddAgent = !showAddAgent" class="text-sm text-indigo-600 hover:underline">
           {{ showAddAgent ? 'Cancel' : '+ Add Agent' }}
@@ -128,7 +128,7 @@
       </div>
 
       <div v-if="showAddAgent" class="bg-gray-50 rounded-xl p-4 mb-5 space-y-3">
-        <form @submit.prevent="submitAgent" class="grid grid-cols-3 gap-3">
+        <form @submit.prevent="submitAgent" class="grid grid-cols-1 gap-3 sm:grid-cols-3">
           <div>
             <label class="block text-xs text-gray-500 mb-1">User ID</label>
             <input v-model="agentForm.user_id" required type="number" placeholder="User ID" class="w-full text-sm border-gray-300 rounded-lg" />
@@ -147,7 +147,7 @@
               <option value="manager">Manager</option>
             </select>
           </div>
-          <div class="col-span-3 flex justify-end">
+          <div class="col-span-1 sm:col-span-3 flex justify-end">
             <button type="submit" :disabled="agentForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">
               Add Agent
             </button>
@@ -172,7 +172,7 @@
     </div>
 
     <div v-if="activeTab === 'priorities'">
-      <div class="flex justify-between items-center mb-4">
+      <div class="flex flex-wrap justify-between items-center gap-2 mb-4">
         <h2 class="text-lg font-semibold text-gray-800">Priority Levels</h2>
         <button @click="showAddPriority = !showAddPriority" class="text-sm text-indigo-600 hover:underline">
           {{ showAddPriority ? 'Cancel' : '+ Add Priority' }}
@@ -180,7 +180,7 @@
       </div>
 
       <div v-if="showAddPriority" class="bg-gray-50 rounded-xl p-4 mb-5 space-y-3">
-        <form @submit.prevent="submitPriority" class="grid grid-cols-2 gap-3">
+        <form @submit.prevent="submitPriority" class="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
             <label class="block text-xs text-gray-500 mb-1">Name</label>
             <input v-model="priorityForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
@@ -189,7 +189,7 @@
             <label class="block text-xs text-gray-500 mb-1">Color</label>
             <input v-model="priorityForm.color" type="color" class="h-9 w-full border-gray-300 rounded-lg cursor-pointer" />
           </div>
-          <div class="col-span-2">
+          <div class="col-span-1 sm:col-span-2">
             <label class="block text-xs text-gray-500 mb-1">Description</label>
             <input v-model="priorityForm.description" type="text" class="w-full text-sm border-gray-300 rounded-lg" />
           </div>
@@ -204,7 +204,7 @@
               <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }}</option>
             </select>
           </div>
-          <div class="col-span-2 flex justify-end">
+          <div class="col-span-1 sm:col-span-2 flex justify-end">
             <button type="submit" :disabled="priorityForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">
               Create Priority
             </button>
@@ -234,7 +234,7 @@
 
       <div v-if="editingPriority" class="mt-4 bg-gray-50 rounded-xl p-4 space-y-3">
         <h3 class="text-sm font-semibold text-gray-700">Edit Priority: {{ editingPriority.name }}</h3>
-        <form @submit.prevent="submitEditPriority" class="grid grid-cols-2 gap-3">
+        <form @submit.prevent="submitEditPriority" class="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
             <label class="block text-xs text-gray-500 mb-1">Name</label>
             <input v-model="editPriorityForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
@@ -243,7 +243,7 @@
             <label class="block text-xs text-gray-500 mb-1">Color</label>
             <input v-model="editPriorityForm.color" type="color" class="h-9 w-full border-gray-300 rounded-lg cursor-pointer" />
           </div>
-          <div class="col-span-2">
+          <div class="col-span-1 sm:col-span-2">
             <label class="block text-xs text-gray-500 mb-1">Description</label>
             <input v-model="editPriorityForm.description" type="text" class="w-full text-sm border-gray-300 rounded-lg" />
           </div>
@@ -255,7 +255,7 @@
             <label class="block text-xs text-gray-500 mb-1">Scope</label>
             <input :value="editingPriority.group_id ? 'Group-specific' : 'Global'" disabled type="text" class="w-full text-sm border-gray-300 rounded-lg opacity-70" />
           </div>
-          <div class="col-span-2 flex justify-end gap-2">
+          <div class="col-span-1 sm:col-span-2 flex justify-end gap-2">
             <button type="button" @click="editingPriority = null" class="text-sm text-gray-500 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
             <button type="submit" :disabled="editPriorityForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">Save</button>
           </div>
@@ -264,7 +264,7 @@
     </div>
 
     <div v-if="activeTab === 'projects'">
-      <div class="flex justify-between items-center mb-4">
+      <div class="flex flex-wrap justify-between items-center gap-2 mb-4">
         <h2 class="text-lg font-semibold text-gray-800">Projects</h2>
         <button @click="showAddProject = !showAddProject" class="text-sm text-indigo-600 hover:underline">
           {{ showAddProject ? 'Cancel' : '+ Add Project' }}
@@ -272,7 +272,7 @@
       </div>
 
       <div v-if="showAddProject" class="bg-gray-50 rounded-xl p-4 mb-5 space-y-3">
-        <form @submit.prevent="submitProject" class="grid grid-cols-2 gap-3">
+        <form @submit.prevent="submitProject" class="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
             <label class="block text-xs text-gray-500 mb-1">Group</label>
             <select v-model="projectForm.group_id" required class="w-full text-sm border-gray-300 rounded-lg">
@@ -287,15 +287,15 @@
               <option value="archived">Archived</option>
             </select>
           </div>
-          <div class="col-span-2">
+          <div class="col-span-1 sm:col-span-2">
             <label class="block text-xs text-gray-500 mb-1">Name</label>
             <input v-model="projectForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
           </div>
-          <div class="col-span-2">
+          <div class="col-span-1 sm:col-span-2">
             <label class="block text-xs text-gray-500 mb-1">Description</label>
             <textarea v-model="projectForm.description" rows="3" class="w-full text-sm border-gray-300 rounded-lg"></textarea>
           </div>
-          <div class="col-span-2 flex justify-end">
+          <div class="col-span-1 sm:col-span-2 flex justify-end">
             <button type="submit" :disabled="projectForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">
               Create Project
             </button>
@@ -324,8 +324,8 @@
 
       <div v-if="editingProject" class="mt-4 bg-gray-50 rounded-xl p-4 space-y-3">
         <h3 class="text-sm font-semibold text-gray-700">Edit Project: {{ editingProject.name }}</h3>
-        <form @submit.prevent="submitEditProject" class="grid grid-cols-2 gap-3">
-          <div class="col-span-2">
+        <form @submit.prevent="submitEditProject" class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <div class="col-span-1 sm:col-span-2">
             <label class="block text-xs text-gray-500 mb-1">Name</label>
             <input v-model="editProjectForm.name" required type="text" class="w-full text-sm border-gray-300 rounded-lg" />
           </div>
@@ -340,11 +340,11 @@
             <label class="block text-xs text-gray-500 mb-1">Group</label>
             <input :value="groups.find(g => g.id === editingProject.group_id)?.name || 'Unknown Group'" disabled type="text" class="w-full text-sm border-gray-300 rounded-lg opacity-70" />
           </div>
-          <div class="col-span-2">
+          <div class="col-span-1 sm:col-span-2">
             <label class="block text-xs text-gray-500 mb-1">Description</label>
             <textarea v-model="editProjectForm.description" rows="3" class="w-full text-sm border-gray-300 rounded-lg"></textarea>
           </div>
-          <div class="col-span-2 flex justify-end gap-2">
+          <div class="col-span-1 sm:col-span-2 flex justify-end gap-2">
             <button type="button" @click="editingProject = null" class="text-sm text-gray-500 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">Cancel</button>
             <button type="submit" :disabled="editProjectForm.processing" class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-60">Save</button>
           </div>