From d9d40297b68beda2e5c0247d83b744f6775fe25c Mon Sep 17 00:00:00 2001 From: cproudlock Date: Sun, 12 Jul 2026 21:19:06 -0400 Subject: [PATCH] Fix transparent + cramped GE-Enforce modals --bg-card is translucent (rgba .4) in dark mode - a glass effect for cards on the page, but a floating modal rendered over content showed the page through it. Modals now use --bg-card-solid (the opaque surface the shared Modal.vue uses), with a border + shadow, and are wider (entry editor min(920px,94vw)) so the full field set fits. Co-Authored-By: Claude Opus 4.8 --- frontend/src/views/geenforce/EnforcementReports.vue | 7 ++++--- frontend/src/views/geenforce/ManifestEditor.vue | 13 ++++++++----- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/frontend/src/views/geenforce/EnforcementReports.vue b/frontend/src/views/geenforce/EnforcementReports.vue index 5a51f48..ef6e095 100644 --- a/frontend/src/views/geenforce/EnforcementReports.vue +++ b/frontend/src/views/geenforce/EnforcementReports.vue @@ -135,8 +135,9 @@ load() .empty { color: var(--text-light); text-align: center; padding: 1rem; } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; } -.modal { background: var(--bg-card); padding: 1.25rem; border-radius: 8px; min-width: 340px; - max-height: 90vh; overflow-y: auto; } -.modal-wide { min-width: 640px; } +.modal { background: var(--bg-card-solid); padding: 1.5rem; border-radius: 8px; + border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); + min-width: 340px; max-height: 90vh; overflow-y: auto; } +.modal-wide { width: min(820px, 94vw); } .modal-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; } diff --git a/frontend/src/views/geenforce/ManifestEditor.vue b/frontend/src/views/geenforce/ManifestEditor.vue index ba57bf8..67c9afd 100644 --- a/frontend/src/views/geenforce/ManifestEditor.vue +++ b/frontend/src/views/geenforce/ManifestEditor.vue @@ -609,12 +609,15 @@ loadConfig() .sim-result { margin-top: 0.5rem; font-size: 0.85rem; } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; } -.modal { background: var(--bg-card); padding: 1.25rem; border-radius: 8px; +/* Opaque surface (--bg-card is translucent in dark mode - would show the page + through a floating modal); matches the shared Modal.vue. */ +.modal { background: var(--bg-card-solid); padding: 1.5rem; border-radius: 8px; + border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); min-width: 340px; max-height: 90vh; overflow-y: auto; } -.modal-wide { min-width: 640px; } -.modal label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; - color: var(--text-light); margin-bottom: 0.5rem; } -.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } +.modal-wide { width: min(920px, 94vw); } +.modal label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; + color: var(--text-light); margin-bottom: 0.6rem; } +.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1.5rem; } .form-grid .full { grid-column: 1 / -1; } .advanced summary { cursor: pointer; font-size: 0.85rem; margin-bottom: 0.5rem; } .proc-head { display: flex; justify-content: space-between; align-items: center;