Phase 4: power UX (palette, shortcuts, mentions, mobile, PWA)

Command palette (cmd+K) with fuzzy nav, ticket search, people lookup
and action entries (new ticket, logout, show shortcuts). Opens from
keyboard or user dropdown.

Global keyboard shortcuts via a small useShortcut/useLeaderShortcut
hook: `?` help overlay, `c` new ticket, `g d|t|m|n|s` leader nav.
Tickets list: j/k cursor, Enter open, x toggle select. TicketDetail:
`e` edit, `r` focus comment composer. All guarded against firing
inside text fields.

@mention autocomplete in the comment composer (MentionTextarea) with
arrow-key nav and Tab/Enter insert. Rendered comments and audit log
rewrite @username tokens to links pointing at that user's assignee
filter; unknown usernames left as plain text.

Mobile sweep: TicketDetail sidebar stacks below content on <md,
Settings profile grid collapses to one column, admin tables get
horizontal scroll with a 640px min width, CTI 3-column grid stacks
vertically on <md, New ticket severity/assignee grid same.

PWA: manifest.webmanifest, SVG icon, minimal network-first service
worker for the app shell (never caches /api/*), registered in
production builds only. Theme-color meta + manifest link in index.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

client/src/pages/admin/CTI.tsx

@@ -137,7 +137,7 @@ export default function AdminCTI() {
 
   return (
     <Layout title="CTI Configuration">
-      <div className="grid grid-cols-3 gap-4 h-[calc(100vh-10rem)]">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:h-[calc(100vh-10rem)]">
         {/* Categories */}
         <div className={panelClass}>
           <div className={panelHeaderClass}>

client/src/pages/admin/Users.tsx

@@ -193,8 +193,8 @@ export default function AdminUsers() {
         </button>
       }
     >
-      <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
-        <table className="w-full text-sm">
+      <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-x-auto">
+        <table className="w-full text-sm min-w-[640px]">
           <thead className="border-b border-gray-800">
             <tr>
               <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">

client/src/pages/admin/Webhooks.tsx

@@ -116,8 +116,8 @@ export default function AdminWebhooks() {
           No webhooks configured. Add one to push events to n8n, Slack, or any HTTP receiver.
         </div>
       ) : (
-        <div className="rounded-md border border-border overflow-hidden">
-          <table className="w-full text-sm">
+        <div className="rounded-md border border-border overflow-x-auto">
+          <table className="w-full text-sm min-w-[640px]">
             <thead className="border-b border-border bg-card text-xs uppercase text-muted-foreground">
               <tr>
                 <th className="text-left px-4 py-2">Name</th>