Merge pull request galaxyproject#17742 from martenson/poptrouble

[24.0] fix overflowing and hiding of storage popovers
jdavcs · Mar 15, 2024 · 2c3f15e · 2c3f15e
2 parents cea038c + 6431a73
commit 2c3f15e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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>