fe/src/assets/valerie-ui.scss

@@ -917,11 +917,13 @@ select.form-input {
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background-color: rgba(57, 62, 70, 0.7);
+  background-color: rgba(57, 62, 70, 0.9);
+  /* Increased opacity for better visibility */
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: 9999;
+  /* Increased z-index to ensure it's above other elements */
   opacity: 0;
   visibility: hidden;
   transition:
@@ -941,16 +943,18 @@ select.form-input {
   background-color: var(--light);
   border: var(--border);
   width: 90%;
-  max-width: 550px;
+  max-width: 850px;
   box-shadow: var(--shadow-lg);
   position: relative;
-  overflow-y: scroll;
-  /* Can cause tooltip clipping */
+  overflow-y: auto;
+  /* Changed from scroll to auto */
   transform: scale(0.95) translateY(-20px);
   transition: transform var(--transition-speed) var(--transition-ease-out);
   max-height: 90vh;
   display: flex;
   flex-direction: column;
+  z-index: 10000;
+  /* Ensure modal content is above backdrop */
 }
 
 .modal-container::before {