From 6431a736d41abd14805b73688101b0043805e2b4 Mon Sep 17 00:00:00 2001
From: Martin Cech <marten@bx.psu.edu>
Date: Thu, 14 Mar 2024 15:24:15 -0700
Subject: [PATCH] fix overflowing and hiding of storage popovers

- wrap content in a width-limited element
- add window boundary to storage popovers
---
 .../CurrentHistory/PreferredStorePopover.vue  | 40 +++++++++++--------
 .../ToolTargetPreferredObjectStorePopover.vue | 37 ++++++++++-------
 ...kflowTargetPreferredObjectStorePopover.vue | 36 +++++++++++------
 3 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue b/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
index 9ea39503c6bc..ff28f962fba7 100644
--- a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
+++ b/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
@@ -22,24 +22,30 @@ const preferredObjectStoreId = computed(() => {
 </script>
 
 <template>
-    <BPopover :target="`history-storage-${historyId}`" triggers="hover" placement="bottomleft">
+    <BPopover :target="`history-storage-${historyId}`" triggers="hover" placement="bottomleft" boundary="window">
         <template v-slot:title>Preferred Target Object Store</template>
-
-        <p v-if="historyPreferredObjectStoreId" class="history-preferred-object-store-inherited">
-            This target object store has been set at the history level.
-        </p>
-        <p v-else class="history-preferred-object-store-not-inherited">
-            This target object store has been inherited from your user preferences (set in User -> Preferences ->
-            Preferred Object Store). If that option is updated, this history will target that new default.
-        </p>
-
-        <ShowSelectedObjectStore
-            v-if="preferredObjectStoreId"
-            :preferred-object-store-id="preferredObjectStoreId"
-            for-what="Galaxy will default to storing this history's datasets in " />
-
-        <div v-localize>
-            Change this preference object store target by clicking on the storage button in the history panel.
+        <div class="popover-wide">
+            <p v-if="historyPreferredObjectStoreId" class="history-preferred-object-store-inherited">
+                This target object store has been set at the history level.
+            </p>
+            <p v-else class="history-preferred-object-store-not-inherited">
+                This target object store has been inherited from your user preferences (set in User -> Preferences ->
+                Preferred Object Store). If that option is updated, this history will target that new default.
+            </p>
+
+            <ShowSelectedObjectStore
+                v-if="preferredObjectStoreId"
+                :preferred-object-store-id="preferredObjectStoreId"
+                for-what="Galaxy will default to storing this history's datasets in " />
+
+            <div v-localize>
+                Change this preference object store target by clicking on the storage button in the history panel.
+            </div>
         </div>
     </BPopover>
 </template>
+<style scoped lang="scss">
+.popover-wide {
+    max-width: 30rem;
+}
+</style>
diff --git a/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue b/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue
index b1d63c44c3c6..bdf4264144e2 100644
--- a/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue
+++ b/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue
@@ -1,20 +1,22 @@
 <template>
-    <b-popover target="tool-storage" triggers="hover" placement="bottomleft">
+    <b-popover target="tool-storage" triggers="hover" placement="bottomleft" boundary="window">
         <template v-slot:title>{{ title }}</template>
-        <p v-if="toolPreferredObjectStoreId">
-            This target object store has been set at the tool level, by default history or user preferences will be used
-            and if those are not set Galaxy will pick an adminstrator configured default.
-        </p>
-        <ShowSelectedObjectStore
-            v-if="toolPreferredObjectStoreId"
-            :preferred-object-store-id="toolPreferredObjectStoreId"
-            for-what="Galaxy will default to storing this tool run's output in">
-        </ShowSelectedObjectStore>
-        <div v-else>
-            No selection has been made for this tool execution. Defaults from history, user, or Galaxy will be used.
-        </div>
-        <div v-localize>
-            Change this preference object store target by clicking on the storage button in the tool header.
+        <div class="popover-wide">
+            <p v-if="toolPreferredObjectStoreId">
+                This target object store has been set at the tool level, by default history or user preferences will be
+                used and if those are not set Galaxy will pick an adminstrator configured default.
+            </p>
+            <ShowSelectedObjectStore
+                v-if="toolPreferredObjectStoreId"
+                :preferred-object-store-id="toolPreferredObjectStoreId"
+                for-what="Galaxy will default to storing this tool run's output in">
+            </ShowSelectedObjectStore>
+            <div v-else>
+                No selection has been made for this tool execution. Defaults from history, user, or Galaxy will be used.
+            </div>
+            <div v-localize>
+                Change this preference object store target by clicking on the storage button in the tool header.
+            </div>
         </div>
     </b-popover>
 </template>
@@ -33,3 +35,8 @@ export default {
     },
 };
 </script>
+<style scoped lang="scss">
+.popover-wide {
+    max-width: 30rem;
+}
+</style>
diff --git a/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue b/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue
index 197e2968a0ab..b78eb8db9255 100644
--- a/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue
+++ b/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue
@@ -1,18 +1,22 @@
 <template>
-    <b-popover :target="target" triggers="hover" placement="bottomleft">
+    <b-popover :target="target" triggers="hover" placement="bottomleft" boundary="window">
         <template v-slot:title>{{ title }}</template>
-        <p v-if="invocationPreferredObjectStoreId">This target object store has been set at the invocation level.</p>
-        <ShowSelectedObjectStore
-            v-if="invocationPreferredObjectStoreId"
-            :preferred-object-store-id="invocationPreferredObjectStoreId"
-            for-what="Galaxy will default to storing this tool run's output in">
-        </ShowSelectedObjectStore>
-        <div v-else>
-            No selection has been made for this worklfow invocation. Defaults from history, user, or Galaxy will be
-            used.
-        </div>
-        <div v-localize>
-            Change this preference object store target by clicking on the storage button in the worklfow run header.
+        <div class="popover-wide">
+            <p v-if="invocationPreferredObjectStoreId">
+                This target object store has been set at the invocation level.
+            </p>
+            <ShowSelectedObjectStore
+                v-if="invocationPreferredObjectStoreId"
+                :preferred-object-store-id="invocationPreferredObjectStoreId"
+                for-what="Galaxy will default to storing this tool run's output in">
+            </ShowSelectedObjectStore>
+            <div v-else>
+                No selection has been made for this worklfow invocation. Defaults from history, user, or Galaxy will be
+                used.
+            </div>
+            <div v-localize>
+                Change this preference object store target by clicking on the storage button in the worklfow run header.
+            </div>
         </div>
     </b-popover>
 </template>
@@ -34,3 +38,9 @@ export default {
     },
 };
 </script>
+
+<style scoped lang="scss">
+.popover-wide {
+    max-width: 30rem;
+}
+</style>