Reroute ticket via modal instead of inline sidebar expansion

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/pages/TicketDetail.tsx

@@ -10,6 +10,7 @@ import {
 } from 'lucide-react'
 import api from '../api/client'
 import Layout from '../components/Layout'
+import Modal from '../components/Modal'
 import SeverityBadge from '../components/SeverityBadge'
 import StatusBadge from '../components/StatusBadge'
 import CTISelect from '../components/CTISelect'
@@ -540,41 +541,19 @@ export default function TicketDetail() {
             {/* Routing */}
             <div className="px-4 py-3">
               <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Routing</p>
-              {reroutingCTI ? (
-                <div className="space-y-2">
-                  <CTISelect value={pendingCTI} onChange={setPendingCTI} />
-                  <div className="flex gap-2 pt-1">
-                    <button
-                      onClick={() => setReroutingCTI(false)}
-                      className="flex-1 text-xs py-1.5 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors text-gray-400"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      onClick={saveReroute}
-                      className="flex-1 text-xs py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-                    >
-                      Save
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <div>
-                  <p className="text-xs text-gray-300 leading-relaxed">
-                    {ticket.category.name}
-                    <span className="text-gray-600"> › </span>
-                    {ticket.type.name}
-                    <span className="text-gray-600"> › </span>
-                    {ticket.item.name}
-                  </p>
-                  <button
-                    onClick={startReroute}
-                    className="mt-1.5 text-xs text-blue-500 hover:text-blue-400 transition-colors"
-                  >
-                    Change routing
-                  </button>
-                </div>
-              )}
+              <p className="text-xs text-gray-300 leading-relaxed">
+                {ticket.category.name}
+                <span className="text-gray-600"> › </span>
+                {ticket.type.name}
+                <span className="text-gray-600"> › </span>
+                {ticket.item.name}
+              </p>
+              <button
+                onClick={startReroute}
+                className="mt-1.5 text-xs text-blue-500 hover:text-blue-400 transition-colors"
+              >
+                Change routing
+              </button>
             </div>
 
             {/* Dates */}
@@ -624,6 +603,35 @@ export default function TicketDetail() {
           </div>
         </div>
       </div>
+      {/* Reroute modal */}
+      {reroutingCTI && (
+        <Modal title="Change Routing" onClose={() => setReroutingCTI(false)} size="lg">
+          <div className="space-y-5">
+            <p className="text-sm text-gray-400">
+              Current:{' '}
+              <span className="text-gray-200">
+                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+              </span>
+            </p>
+            <CTISelect value={pendingCTI} onChange={setPendingCTI} />
+            <div className="flex justify-end gap-3 pt-1">
+              <button
+                onClick={() => setReroutingCTI(false)}
+                className="px-4 py-2 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={saveReroute}
+                disabled={!pendingCTI.itemId}
+                className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+              >
+                Save routing
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
     </Layout>
   )
 }