From fa6e64b9343c654a72a9bae6e61847f12e6e27ce Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 15 Dec 2023 19:35:01 +0500
Subject: [PATCH] [23.2] Fix `Multiselect` in `BModal` overflows out of view
 bug

Use `overflow: initial` to fix make sure the multiselect goes
beyond the modal.
---
 .../HistoryOperations/SelectionOperations.vue          | 10 ++++++++--
 client/src/components/Upload/UploadModal.vue           |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index 0569f4b06cf4..9b70de885019 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -91,6 +91,7 @@
             id="change-dbkey-of-selected-content"
             title="Change Database/Build?"
             title-tag="h2"
+            body-class="modal-with-selector"
             @ok="changeDbkeyOfSelected">
             <p v-localize>Select a new Database/Build for {{ numSelected }} items:</p>
             <DbKeyProvider v-slot="{ item: dbkeys, loading: loadingDbKeys }">
@@ -99,7 +100,6 @@
                     :loading="loadingDbKeys"
                     :items="dbkeys"
                     :current-item-id="selectedDbKey"
-                    class="mb-5 pb-5"
                     @update:selected-item="onSelectedDbKey" />
             </DbKeyProvider>
         </b-modal>
@@ -107,6 +107,7 @@
             id="change-datatype-of-selected-content"
             title="Change data type?"
             title-tag="h2"
+            body-class="modal-with-selector"
             :ok-disabled="selectedDatatype == null"
             @ok="changeDatatypeOfSelected">
             <p v-localize>Select a new data type for {{ numSelected }} items:</p>
@@ -116,7 +117,6 @@
                     :loading="loadingDatatypes"
                     :items="datatypes"
                     :current-item-id="selectedDatatype"
-                    class="mb-5 pb-5"
                     @update:selected-item="onSelectedDatatype" />
             </DatatypesProvider>
         </b-modal>
@@ -347,3 +347,9 @@ export default {
     },
 };
 </script>
+
+<style>
+.modal-with-selector {
+    overflow: initial;
+}
+</style>
diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
index bcd8e8d3e0ec..8aca0acde0dc 100644
--- a/client/src/components/Upload/UploadModal.vue
+++ b/client/src/components/Upload/UploadModal.vue
@@ -101,6 +101,6 @@ defineExpose({
 
 .upload-dialog-body {
     height: 500px;
-    overflow: hidden;
+    overflow: initial;
 }
 </style>