Fix modal overflow issue on bulk list popup UI. Closes #1030.

knadh · Nov 18, 2022 · 2761a5e · 2761a5e
1 parent 1e90fee
commit 2761a5e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
@@ -357,6 +357,19 @@ body.is-noscroll {
 /* Modal */
 .modal {
   z-index: 950;
+
+  &.has-overflow {
+    overflow: auto !important;
+    .modal-content {
+      overflow: visible !important;
+    }
+    .modal-card {
+      overflow: visible !important;
+    }
+    .modal-card-body {
+      overflow: visible !important;
+    }
+  }
 }
 .modal-background {
   background: rgba(255, 255, 255, 0.7);
@@ -377,6 +390,7 @@ body.is-noscroll {
   display: none;
 }
 
+
 /* Table */
 .b-table .level-left {
   min-width: 60%;

diff --git a/frontend/src/views/Subscribers.vue b/frontend/src/views/Subscribers.vue
@@ -193,7 +193,8 @@
     </b-table>
 
     <!-- Manage list modal -->
-    <b-modal scroll="keep" :aria-modal="true" :active.sync="isBulkListFormVisible" :width="450">
+    <b-modal scroll="keep" :aria-modal="true" :active.sync="isBulkListFormVisible"
+      :width="500" class="has-overflow">
       <subscriber-bulk-list :numSubscribers="this.numSelectedSubscribers"
         @finished="bulkChangeLists" />
     </b-modal>