From 9035a17f21b385bf33a20e1585efe4d605820efa Mon Sep 17 00:00:00 2001
From: rob <robdickson444@hotmail.com>
Date: Fri, 16 Jan 2026 15:04:05 -0400
Subject: [PATCH] Improve modal styling and make dialogs draggable

- Darker overlay (bg-gray-900 bg-opacity-60)
- Stronger border (border-2 border-gray-300)
- Larger shadow (shadow-2xl)
- Gray header bar with cursor-move indicator
- Draggable by header (both detail and reject modals)
- Position resets on close for re-centering

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/cmdforge/web/templates/admin/pending.html | 81 +++++++++++++++++--
 1 file changed, 74 insertions(+), 7 deletions(-)

diff --git a/src/cmdforge/web/templates/admin/pending.html b/src/cmdforge/web/templates/admin/pending.html
index 9041d08..d678c75 100644
--- a/src/cmdforge/web/templates/admin/pending.html
+++ b/src/cmdforge/web/templates/admin/pending.html
@@ -140,9 +140,9 @@
 </div>
 
 <!-- Tool Detail Modal -->
-<div id="detail-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
-    <div class="relative top-10 mx-auto p-6 border max-w-4xl shadow-lg rounded-md bg-white mb-10">
-        <div class="flex items-center justify-between mb-4">
+<div id="detail-modal" class="fixed inset-0 bg-gray-900 bg-opacity-60 hidden overflow-y-auto h-full w-full z-50">
+    <div id="detail-modal-content" class="relative top-10 mx-auto p-6 border-2 border-gray-300 max-w-4xl shadow-2xl rounded-lg bg-white mb-10">
+        <div id="detail-modal-header" class="flex items-center justify-between mb-4 cursor-move select-none bg-gray-50 -mx-6 -mt-6 px-6 py-4 rounded-t-lg border-b border-gray-200">
             <h3 id="detail-title" class="text-lg font-medium text-gray-900">Tool Details</h3>
             <button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-600">
                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -185,10 +185,12 @@
 </div>
 
 <!-- Reject Modal -->
-<div id="reject-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
-    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
-        <div class="mt-3">
-            <h3 class="text-lg font-medium text-gray-900 mb-4">Reject Tool</h3>
+<div id="reject-modal" class="fixed inset-0 bg-gray-900 bg-opacity-60 hidden overflow-y-auto h-full w-full z-50">
+    <div id="reject-modal-content" class="relative top-20 mx-auto border-2 border-gray-300 w-96 shadow-2xl rounded-lg bg-white">
+        <div id="reject-modal-header" class="cursor-move select-none bg-gray-50 px-5 py-4 rounded-t-lg border-b border-gray-200">
+            <h3 class="text-lg font-medium text-gray-900">Reject Tool</h3>
+        </div>
+        <div class="p-5">
             <textarea id="reject-reason" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Reason for rejection (required)"></textarea>
             <div class="mt-4 flex justify-end space-x-3">
                 <button onclick="closeRejectModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Cancel</button>
@@ -299,6 +301,12 @@ async function viewTool(toolId) {
 
 function closeDetailModal() {
     document.getElementById('detail-modal').classList.add('hidden');
+    // Reset position for next open
+    const modal = document.getElementById('detail-modal-content');
+    modal.style.position = '';
+    modal.style.left = '';
+    modal.style.top = '';
+    modal.style.margin = '';
     currentDetailToolId = null;
 }
 
@@ -340,6 +348,12 @@ function rejectTool(toolId) {
 
 function closeRejectModal() {
     document.getElementById('reject-modal').classList.add('hidden');
+    // Reset position for next open
+    const modal = document.getElementById('reject-modal-content');
+    modal.style.position = '';
+    modal.style.left = '';
+    modal.style.top = '';
+    modal.style.margin = '';
     currentToolId = null;
 }
 
@@ -372,5 +386,58 @@ async function confirmReject() {
         alert('Error: ' + (error.message || 'Unknown error occurred'));
     }
 }
+
+// Draggable modal functionality
+function makeDraggable(modalContentId, headerHandleId) {
+    const modal = document.getElementById(modalContentId);
+    const header = document.getElementById(headerHandleId);
+    if (!modal || !header) return;
+
+    let isDragging = false;
+    let startX, startY, initialX, initialY;
+
+    header.addEventListener('mousedown', (e) => {
+        if (e.target.tagName === 'BUTTON') return; // Don't drag when clicking buttons
+        isDragging = true;
+        startX = e.clientX;
+        startY = e.clientY;
+
+        const rect = modal.getBoundingClientRect();
+        initialX = rect.left;
+        initialY = rect.top;
+
+        // Switch to fixed positioning for dragging
+        modal.style.position = 'fixed';
+        modal.style.left = initialX + 'px';
+        modal.style.top = initialY + 'px';
+        modal.style.margin = '0';
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    });
+
+    function onMouseMove(e) {
+        if (!isDragging) return;
+        e.preventDefault();
+
+        const deltaX = e.clientX - startX;
+        const deltaY = e.clientY - startY;
+
+        modal.style.left = (initialX + deltaX) + 'px';
+        modal.style.top = (initialY + deltaY) + 'px';
+    }
+
+    function onMouseUp() {
+        isDragging = false;
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    }
+}
+
+// Initialize draggable modals
+document.addEventListener('DOMContentLoaded', () => {
+    makeDraggable('detail-modal-content', 'detail-modal-header');
+    makeDraggable('reject-modal-content', 'reject-modal-header');
+});
 </script>
 {% endblock %}