settings: make the user and audit-log dialogs opaque
Some checks failed
CI / backend (push) Failing after 8s
CI / naming (push) Successful in 2s
CI / frontend (push) Successful in 9s
CI / migrations-mysql (push) Failing after 6s

The Add User dialog was see-through over its own overlay in dark mode. Both it
and the audit-log detail dialog set background: var(--bg-card), which is
translucent in dark mode - frontend/CLAUDE.md already names this trap and says
a modal panel must use var(--bg-card-solid). The shared Modal.vue and the
.modal rule in style.css were already correct; these two hand-rolled panels
were not.

Audited every modal-ish panel in the app while here. The remaining
var(--bg-card) uses are correct and deliberate: .relationships-section and
.permission-category are cards, and the audit-log .filters rules are form
controls - translucency is the intended look on all of them.

One more was worth changing: the warranty asset-search dropdown floats above
the form INSIDE a modal, so a translucent panel let the fields show through the
suggestions. That one is now solid too.
This commit is contained in:
cproudlock
2026-08-10 09:41:59 -04:00
parent 9e271b4c03
commit 2bfb5e7e69
2 changed files with 5 additions and 2 deletions

View File

@@ -319,7 +319,8 @@ onMounted(loadLogs)
}
.modal {
background: var(--bg-card);
/* SOLID, not var(--bg-card) - translucent in dark mode over the overlay. */
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 8px;
min-width: 500px;

View File

@@ -636,7 +636,9 @@ onMounted(loadData)
}
.modal {
background: var(--bg-card);
/* SOLID, not var(--bg-card): the card variable is translucent in dark mode,
which left this dialog see-through over its own overlay. */
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 8px;
width: 500px;