GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix modal CSS conflict - rename to settings-modal

Browse source 
- 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
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-01-03 19:29:14 -03:00
parent a542141d42
commit 518eac442e
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ui/suite/settings/index.html
View file

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