From 90b26bbfea0c6d620a940e01700be9a844357fa8 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Tue, 3 Mar 2026 09:22:03 -0500
Subject: [PATCH] fix(dashboard): use correct modal CSS classes in user
 management page

The create, edit, and reset-password modals were using 'modal-overlay'
and 'modal' classes instead of the standard 'modal active' and
'modal-content' pattern, making them invisible due to CSS rules that
hide .modal elements without the .active class.
---
 static/js/pages/users.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/static/js/pages/users.js b/static/js/pages/users.js
index 9163b993..01d04b84 100644
--- a/static/js/pages/users.js
+++ b/static/js/pages/users.js
@@ -79,10 +79,9 @@
 
     function showCreateModal() {
         const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.id = 'user-modal-overlay';
+        overlay.className = 'modal active';
         overlay.innerHTML = `
-            <div class="modal" style="max-width: 480px;">
+            <div class="modal-content" style="max-width: 480px;">
                 <div class="modal-header">
                     <h3>Create New User</h3>
                     <button class="modal-close" id="user-modal-close"><i class="fas fa-times"></i></button>
@@ -157,10 +156,9 @@
         if (!user) return;
 
         const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.id = 'user-edit-overlay';
+        overlay.className = 'modal active';
         overlay.innerHTML = `
-            <div class="modal" style="max-width: 480px;">
+            <div class="modal-content" style="max-width: 480px;">
                 <div class="modal-header">
                     <h3>Edit User: ${escapeHtml(user.username)}</h3>
                     <button class="modal-close" id="edit-modal-close"><i class="fas fa-times"></i></button>
@@ -211,10 +209,9 @@
 
     window._resetUserPassword = function (id, username) {
         const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.id = 'pw-reset-overlay';
+        overlay.className = 'modal active';
         overlay.innerHTML = `
-            <div class="modal" style="max-width: 420px;">
+            <div class="modal-content" style="max-width: 420px;">
                 <div class="modal-header">
                     <h3>Reset Password: ${escapeHtml(username)}</h3>
                     <button class="modal-close" id="pw-modal-close"><i class="fas fa-times"></i></button>