rob
/
CmdForge
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

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>
This commit is contained in:
rob 2026-01-16 15:22:10 -04:00
parent 957a65397a
commit 807a0e28a5
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/cmdforge/web/templates/admin/pending.html
View File

@ -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;
}