From 518eac442e781c4fff888f575354313a79c4aba7 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Sat, 3 Jan 2026 19:29:14 -0300
Subject: [PATCH] Fix modal CSS conflict - rename to settings-modal

- Renamed 'modal' class to 'settings-modal' to avoid conflict with components.css
- components.css has .modal { display: flex } which was overriding display: none
- Added !important to ensure settings-modal styles take precedence
- Updated all modal references in HTML and JavaScript
---
 ui/suite/settings/index.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/ui/suite/settings/index.html b/ui/suite/settings/index.html
index bd11d35..0b23e4f 100644
--- a/ui/suite/settings/index.html
+++ b/ui/suite/settings/index.html
@@ -941,7 +941,7 @@
 </div>
 
 <!-- 2FA Modal -->
-<div id="2fa-modal" class="modal">
+<div id="2fa-modal" class="settings-modal">
     <div class="modal-content">
         <div class="modal-header">
             <h2>Enable Two-Factor Authentication</h2>
@@ -959,7 +959,7 @@
 </div>
 
 <!-- Create API Key Modal -->
-<div id="create-api-key-modal" class="modal">
+<div id="create-api-key-modal" class="settings-modal">
     <div class="modal-content">
         <div class="modal-header">
             <h2>Create API Key</h2>
@@ -1004,7 +1004,7 @@
 </div>
 
 <!-- Add Webhook Modal -->
-<div id="add-webhook-modal" class="modal">
+<div id="add-webhook-modal" class="settings-modal">
     <div class="modal-content">
         <div class="modal-header">
             <h2>Add Webhook</h2>
@@ -1049,7 +1049,7 @@
 </div>
 
 <!-- Delete Account Modal -->
-<div id="delete-account-modal" class="modal">
+<div id="delete-account-modal" class="settings-modal">
     <div class="modal-content">
         <div class="modal-header">
             <h2>Delete Account</h2>
@@ -1090,7 +1090,7 @@
 </div>
 
 <!-- Add Payment Method Modal -->
-<div id="add-payment-modal" class="modal">
+<div id="add-payment-modal" class="settings-modal">
     <div class="modal-content">
         <div class="modal-header">
             <h2>Add Payment Method</h2>
@@ -1700,8 +1700,8 @@
         color: var(--text);
     }
 
-    /* Modal Styles */
-    .modal {
+    /* Settings Modal Styles */
+    .settings-modal {
         position: fixed;
         top: 0;
         left: 0;
@@ -1714,13 +1714,13 @@
         padding: 0;
         margin: 0;
         z-index: 10000;
-        display: none;
+        display: none !important;
         align-items: center;
         justify-content: center;
     }
 
-    .modal.open {
-        display: flex;
+    .settings-modal.open {
+        display: flex !important;
     }
 
     .modal-content {
@@ -1949,7 +1949,7 @@
 
     // Close all open modals
     function closeAllModals() {
-        document.querySelectorAll('.modal').forEach(function(modal) {
+        document.querySelectorAll('.settings-modal').forEach(function(modal) {
             modal.classList.remove('open');
         });
     }
@@ -1960,7 +1960,7 @@
         closeAllModals();
 
         // Close modal when clicking on backdrop (outside modal-content)
-        document.querySelectorAll('.modal').forEach(function(modal) {
+        document.querySelectorAll('.settings-modal').forEach(function(modal) {
             modal.addEventListener('click', function(e) {
                 if (e.target === modal) {
                     modal.classList.remove('open');