From 807a0e28a517c57369a2e6a05bb53d99399fea6e Mon Sep 17 00:00:00 2001
From: rob <robdickson444@hotmail.com>
Date: Fri, 16 Jan 2026 15:22:10 -0400
Subject: [PATCH] Fix modal scrolling - content scrolls within fixed viewport

- Modal now has max-height of viewport minus padding
- Content area scrolls independently (overflow-y-auto)
- Header and footer buttons stay fixed/visible
- Background scroll locked when modal is open
- Fixes scroll context issues after dragging

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

diff --git a/src/cmdforge/web/templates/admin/pending.html b/src/cmdforge/web/templates/admin/pending.html
index 5ac005e..b1508cd 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-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 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 cursor-move select-none bg-gray-50 px-6 py-4 rounded-t-lg border-b border-gray-200">
+<div id="detail-modal" class="fixed inset-0 bg-gray-900 bg-opacity-60 hidden z-50 flex items-start justify-center pt-10 pb-10">
+    <div id="detail-modal-content" class="border-2 border-gray-300 max-w-4xl w-full shadow-2xl rounded-lg bg-white flex flex-col" style="max-height: calc(100vh - 80px);">
+        <div id="detail-modal-header" class="flex items-center justify-between cursor-move select-none bg-gray-50 px-6 py-4 rounded-t-lg border-b border-gray-200 flex-shrink-0">
             <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">
@@ -150,7 +150,7 @@
                 </svg>
             </button>
         </div>
-        <div class="p-6">
+        <div class="p-6 overflow-y-auto flex-grow">
             <div id="detail-loading" class="py-8 text-center text-gray-500">Loading...</div>
             <div id="detail-content" class="hidden">
                 <!-- Description -->
@@ -177,11 +177,11 @@
                     <div id="detail-readme" class="bg-gray-50 rounded-md p-4 text-sm prose prose-sm max-w-none overflow-auto max-h-64"></div>
                 </div>
             </div>
-            <div class="mt-6 flex justify-end space-x-3 border-t pt-4">
-                <button onclick="closeDetailModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Close</button>
-                <button id="detail-approve-btn" class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Approve</button>
-                <button id="detail-reject-btn" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">Reject</button>
-            </div>
+        </div>
+        <div class="px-6 py-4 flex justify-end space-x-3 border-t bg-gray-50 rounded-b-lg flex-shrink-0">
+            <button onclick="closeDetailModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Close</button>
+            <button id="detail-approve-btn" class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Approve</button>
+            <button id="detail-reject-btn" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">Reject</button>
         </div>
     </div>
 </div>
@@ -214,6 +214,7 @@ function toggleFindings(toolId) {
 async function viewTool(toolId) {
     currentDetailToolId = toolId;
     document.getElementById('detail-modal').classList.remove('hidden');
+    document.body.style.overflow = 'hidden'; // Prevent background scroll
     document.getElementById('detail-loading').classList.remove('hidden');
     document.getElementById('detail-content').classList.add('hidden');
 
@@ -311,12 +312,14 @@ async function viewTool(toolId) {
 
 function closeDetailModal() {
     document.getElementById('detail-modal').classList.add('hidden');
+    document.body.style.overflow = ''; // Restore background scroll
     // Reset position for next open
     const modal = document.getElementById('detail-modal-content');
     modal.style.position = '';
     modal.style.left = '';
     modal.style.top = '';
     modal.style.margin = '';
+    modal.style.transform = '';
     currentDetailToolId = null;
 }
 
@@ -353,17 +356,20 @@ async function approveTool(toolId) {
 function rejectTool(toolId) {
     currentToolId = toolId;
     document.getElementById('reject-modal').classList.remove('hidden');
+    document.body.style.overflow = 'hidden'; // Prevent background scroll
     document.getElementById('reject-reason').value = '';
 }
 
 function closeRejectModal() {
     document.getElementById('reject-modal').classList.add('hidden');
+    document.body.style.overflow = ''; // Restore background scroll
     // Reset position for next open
     const modal = document.getElementById('reject-modal-content');
     modal.style.position = '';
     modal.style.left = '';
     modal.style.top = '';
     modal.style.margin = '';
+    modal.style.transform = '';
     currentToolId = null;
 }