From 2bfb5e7e695d37df1a9bea07997c2c13f9dcc296 Mon Sep 17 00:00:00 2001 From: cproudlock Date: Mon, 10 Aug 2026 09:41:59 -0400 Subject: [PATCH] settings: make the user and audit-log dialogs opaque 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. --- frontend/src/views/settings/AuditLogs.vue | 3 ++- frontend/src/views/settings/UsersList.vue | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/settings/AuditLogs.vue b/frontend/src/views/settings/AuditLogs.vue index d062ba0..7b321b7 100644 --- a/frontend/src/views/settings/AuditLogs.vue +++ b/frontend/src/views/settings/AuditLogs.vue @@ -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; diff --git a/frontend/src/views/settings/UsersList.vue b/frontend/src/views/settings/UsersList.vue index 06fa15a..58fd9aa 100644 --- a/frontend/src/views/settings/UsersList.vue +++ b/frontend/src/views/settings/UsersList.vue @@ -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;