From 98a3dc7c8b358ee5c7cdc2d826e0c213b9627ed5 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 May 2026 09:45:50 -0400
Subject: [PATCH 01/12] unset max width for invocation view progress bars to
 show them fully

Fixes https://github.com/galaxyproject/galaxy/issues/22329
---
 .../WorkflowInvocationState/WorkflowInvocationState.vue          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index f6f339caa42..44066fb42d9 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -582,7 +582,6 @@ async function onCancel() {
     // progress bar shrinks to fit divs on either side
     flex-grow: 1;
     flex-shrink: 1;
-    max-width: 50%;
 
     .steps-progress,
     .jobs-progress {

From 5bae66f2de1f7b34768c22c3ec088f01010549e8 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 May 2026 09:48:20 -0400
Subject: [PATCH 02/12] add a `.onoverflow` prop to `v-g-tooltip` that
 conditionally renders it on text overflow

---
 client/src/components/ProgressBar.vue |  2 +-
 client/src/directives/vGTooltip.ts    | 30 +++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ProgressBar.vue b/client/src/components/ProgressBar.vue
index 42924b57ae4..e3d9f8e049f 100644
--- a/client/src/components/ProgressBar.vue
+++ b/client/src/components/ProgressBar.vue
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
     <div class="my-1 progress-container">
-        <small v-if="props.note" class="progress-note">
+        <small v-if="props.note" v-g-tooltip.onoverflow class="progress-note" :title="props.note">
             {{ props.note }}<span v-if="props.loading">.<span class="blinking">..</span></span>
         </small>
         <BProgress :max="props.total">
diff --git a/client/src/directives/vGTooltip.ts b/client/src/directives/vGTooltip.ts
index 1eeb02554e6..9508d6a3512 100644
--- a/client/src/directives/vGTooltip.ts
+++ b/client/src/directives/vGTooltip.ts
@@ -7,6 +7,7 @@
  *   Trigger:   .hover (default), .focus
  *   Content:   .html (innerHTML instead of textContent)
  *   Styling:   .v-danger
+ *   Behavior:  .onoverflow (only show tooltip when text overflows with ellipsis)
  *
  * Value forms:
  *   v-g-tooltip                           → reads element's title attribute
@@ -37,6 +38,8 @@ interface TooltipState {
     placement: Placement;
     isHtml: boolean;
     showDelay: ReturnType<typeof useDelayedAction>;
+    onOverflow: boolean;
+    resizeObserver: ResizeObserver | null;
 }
 
 const stateMap = new WeakMap<HTMLElement, TooltipState>();
@@ -219,6 +222,14 @@ function showTooltip(el: HTMLElement) {
         return;
     }
 
+    // If onOverflow is enabled, only show tooltip when text is overflowing
+    if (state.onOverflow) {
+        const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+        if (!isOverflowing) {
+            return;
+        }
+    }
+
     suppressNativeTooltip(el);
 
     if (!state.tooltipEl.isConnected) {
@@ -339,6 +350,7 @@ export const vGTooltip: ObjectDirective<HTMLElement> = {
         const modifiers = binding.modifiers || {};
         const isDanger = !!modifiers["v-danger"];
         const isHtml = !!modifiers.html;
+        const onOverflow = !!modifiers.onoverflow;
         const placement = getPlacement(modifiers, binding.value);
 
         const { tooltipEl, arrowEl, contentEl } = createTooltipEl(isDanger);
@@ -348,6 +360,21 @@ export const vGTooltip: ObjectDirective<HTMLElement> = {
         tooltipEl.id = uid;
         el.setAttribute("aria-describedby", uid);
 
+        let resizeObserver: ResizeObserver | null = null;
+        if (onOverflow) {
+            // Watch for size changes to re-evaluate overflow state
+            resizeObserver = new ResizeObserver(() => {
+                // If tooltip is showing but no longer overflowing, hide it
+                if (tooltipEl.isConnected) {
+                    const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+                    if (!isOverflowing) {
+                        hideTooltip(el);
+                    }
+                }
+            });
+            resizeObserver.observe(el);
+        }
+
         const state: TooltipState = {
             tooltipEl,
             arrowEl,
@@ -357,6 +384,8 @@ export const vGTooltip: ObjectDirective<HTMLElement> = {
             placement,
             isHtml,
             showDelay: useDelayedAction(DEFAULT_TOOLTIP_HOVER_DELAY_MS),
+            onOverflow,
+            resizeObserver,
         };
 
         stateMap.set(el, state);
@@ -386,6 +415,7 @@ export const vGTooltip: ObjectDirective<HTMLElement> = {
         state.cleanupListeners();
         clearPendingShow(el);
         state.cleanupAutoUpdate?.();
+        state.resizeObserver?.disconnect();
         state.tooltipEl.remove();
         restoreNativeTooltip(el);
         el.removeAttribute("aria-describedby");

From 14f3f015e42fe78093648998d8c956b89379c268 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 May 2026 10:20:12 -0400
Subject: [PATCH 03/12] use the `.onoverflow` tooltip rendering for click to
 edit history name

---
 .../Collections/common/ClickToEdit.vue        |  2 ++
 .../History/Layout/DetailsLayout.vue          | 22 ++-----------------
 client/src/directives/vGTooltip.ts            |  5 +++--
 3 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Collections/common/ClickToEdit.vue b/client/src/components/Collections/common/ClickToEdit.vue
index a4aa3c117ee..ad9fc0d8fe6 100644
--- a/client/src/components/Collections/common/ClickToEdit.vue
+++ b/client/src/components/Collections/common/ClickToEdit.vue
@@ -83,10 +83,12 @@ function revertToOriginal() {
     <component
         :is="props.component || 'label'"
         v-else
+        v-g-tooltip.onoverflow
         role="button"
         for="click-to-edit-input"
         class="click-to-edit-label text-break"
         tabindex="0"
+        :title="computedValue || title"
         @keyup.enter="editable = true"
         @click.stop="editable = true">
         <span v-if="computedValue">{{ computedValue }}</span>
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 3d758cd0f81..509095d42d5 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -3,7 +3,7 @@ import { faPen, faSave, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BFormInput, BFormTextarea } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { computed, ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 import l from "@/utils/localization";
@@ -41,8 +41,6 @@ const userStore = useUserStore();
 const { isAnonymous } = storeToRefs(userStore);
 
 const nameRef = ref<HTMLInputElement | null>(null);
-const clickToEditRef = ref<InstanceType<typeof ClickToEdit> | null>(null);
-const clickToEditClamped = ref(false);
 
 const editing = ref(false);
 const textSelected = ref(false);
@@ -107,19 +105,6 @@ function onToggle() {
     }
 }
 
-function checkClickToEditClamped() {
-    const el = clickToEditRef.value?.$el;
-    if (el) {
-        clickToEditClamped.value = el.scrollHeight > el.clientHeight;
-    }
-}
-
-onMounted(checkClickToEditClamped);
-watch(
-    () => props.name,
-    () => nextTick(checkClickToEditClamped),
-);
-
 function selectText() {
     if (!textSelected.value) {
         nameRef.value?.select();
@@ -137,11 +122,8 @@ function selectText() {
             <template v-if="!summarized && !editing">
                 <ClickToEdit
                     v-if="renameable"
-                    ref="clickToEditRef"
                     v-model="clickToEditName"
-                    v-g-tooltip.hover="clickToEditClamped ? name : ''"
                     component="h3"
-                    title="..."
                     data-description="name display"
                     no-save-on-blur
                     class="name-display my-2 w-100" />
@@ -194,7 +176,7 @@ function selectText() {
                 v-if="tags"
                 :class="{
                     'mt-2': !summarized,
-                    tags: ['both', 'tags'].includes(summarized),
+                    tags: ['both', 'tags'].includes(summarized || ''),
                     hidden: summarized === 'hidden',
                 }"
                 :value="tags"
diff --git a/client/src/directives/vGTooltip.ts b/client/src/directives/vGTooltip.ts
index 9508d6a3512..93a4574303c 100644
--- a/client/src/directives/vGTooltip.ts
+++ b/client/src/directives/vGTooltip.ts
@@ -224,7 +224,8 @@ function showTooltip(el: HTMLElement) {
 
     // If onOverflow is enabled, only show tooltip when text is overflowing
     if (state.onOverflow) {
-        const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+        // Use a threshold of 1px to account for line clamped text
+        const isOverflowing = el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1;
         if (!isOverflowing) {
             return;
         }
@@ -366,7 +367,7 @@ export const vGTooltip: ObjectDirective<HTMLElement> = {
             resizeObserver = new ResizeObserver(() => {
                 // If tooltip is showing but no longer overflowing, hide it
                 if (tooltipEl.isConnected) {
-                    const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+                    const isOverflowing = el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1;
                     if (!isOverflowing) {
                         hideTooltip(el);
                     }

From f9e63b405a901f06dbf4e5332d654ef7bc61f562 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 May 2026 10:21:03 -0400
Subject: [PATCH 04/12] remove duplicate cancel workflow run button

---
 .../WorkflowInvocationState.vue                      | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 44066fb42d9..ce77d676a92 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -5,7 +5,6 @@ import {
     faExclamation,
     faSpinner,
     faSquare,
-    faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BBadge, BNav, BNavItem } from "bootstrap-vue";
@@ -450,17 +449,6 @@ async function onCancel() {
                 <BBadge v-if="isPolling" v-g-tooltip.hover title="Polling for updates" variant="link">
                     <FontAwesomeIcon :icon="faSpinner" spin />
                 </BBadge>
-                <GButton
-                    v-if="!invocationAndJobTerminal"
-                    tooltip
-                    class="my-1"
-                    title="Cancel scheduling of workflow invocation"
-                    data-description="cancel invocation button"
-                    size="small"
-                    @click="onCancel">
-                    <FontAwesomeIcon :icon="faTimes" fixed-width />
-                    Cancel Workflow
-                </GButton>
             </div>
         </BNav>
 

From c55354bdcda7d6aee245684895f18d081d4777dc Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 May 2026 10:38:49 -0400
Subject: [PATCH 05/12] wrap invocation header workflow name and icons before
 that in line

---
 client/src/components/Workflow/WorkflowNavigationTitle.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index f28788aae02..0fd133c90b3 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -136,9 +136,9 @@ async function rerunWorkflow() {
 
         <div class="position-relative">
             <div v-if="workflow" class="bg-secondary px-2 py-1 rounded d-flex flex-gapx-1 justify-content-between">
-                <div class="py-1 d-flex flex-wrap align-items-center flex-gapx-1" data-description="workflow heading">
+                <div class="py-1 align-items-center" data-description="workflow heading">
                     <slot name="before-icon" />
-                    <FontAwesomeIcon :icon="faSitemap" fixed-width />
+                    <FontAwesomeIcon class="mr-1" :icon="faSitemap" fixed-width />
                     <b> {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }} </b>
                     <span>(Version: {{ workflow.version + 1 }})</span>
                 </div>

From 2e3f87b64deb48f0a5e38f6b6aaa7d59f16b8b5f Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 May 2026 11:19:22 -0400
Subject: [PATCH 06/12] several style fixes for GCard and its usage in several
 places

---
 client/src/components/Common/GCard.vue                      | 6 +++---
 client/src/components/Panels/WorkflowPanel.vue              | 1 -
 .../components/Workflow/Invocation/InvocationScrollList.vue | 2 +-
 client/src/components/Workflow/List/WorkflowCard.vue        | 4 +---
 client/src/components/Workflow/List/WorkflowCardList.vue    | 3 ---
 5 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Common/GCard.vue b/client/src/components/Common/GCard.vue
index 2557892f3aa..10077370d3f 100644
--- a/client/src/components/Common/GCard.vue
+++ b/client/src/components/Common/GCard.vue
@@ -329,7 +329,7 @@ function onKeyDown(event: KeyboardEvent) {
                 <div class="d-flex flex-column flex-gapy-1">
                     <div
                         :id="`g-card-${props.id}-header`"
-                        class="d-flex flex-wrap flex-gapy-1 flex-gapx-1 justify-content-between">
+                        class="d-flex flex-gapy-1 flex-gapx-1 justify-content-between">
                         <div class="d-flex flex-column flex-grow-1 g-card-title-section">
                             <div class="d-flex">
                                 <div v-if="selectable">
@@ -349,7 +349,6 @@ function onKeyDown(event: KeyboardEvent) {
                                             :id="getElementId(props.id, 'title')"
                                             bold
                                             inline
-                                            class="d-block"
                                             :size="props.titleSize">
                                             <FontAwesomeIcon
                                                 v-if="props.titleIcon?.icon"
@@ -371,7 +370,7 @@ function onKeyDown(event: KeyboardEvent) {
                                             <template v-else>
                                                 <span
                                                     :id="getElementId(props.id, 'title-text')"
-                                                    v-g-tooltip.hover
+                                                    v-g-tooltip.onoverflow
                                                     :title="localize(title)"
                                                     :class="{ 'g-card-title-truncate': props.titleNLines }">
                                                     {{ title }}
@@ -758,6 +757,7 @@ function onKeyDown(event: KeyboardEvent) {
 
     .g-card-rename {
         visibility: hidden;
+        align-self: flex-start;
     }
 
     &:hover,
diff --git a/client/src/components/Panels/WorkflowPanel.vue b/client/src/components/Panels/WorkflowPanel.vue
index 8a5d090c43f..106df75ed37 100644
--- a/client/src/components/Panels/WorkflowPanel.vue
+++ b/client/src/components/Panels/WorkflowPanel.vue
@@ -178,7 +178,6 @@ function createNew(event: Event) {
                 :filterable="false"
                 :current-workflow-id="props.currentWorkflowId"
                 editor-view
-                compact
                 @insertWorkflow="(...args) => emit('insertWorkflow', ...args)"
                 @insertWorkflowSteps="(...args) => emit('insertWorkflowSteps', ...args)"
                 @refreshList="refresh" />
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
index 67bedde4a4c..efd87e80df1 100644
--- a/client/src/components/Workflow/Invocation/InvocationScrollList.vue
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -93,7 +93,7 @@ function getInvocationBadges(invocation: WorkflowInvocation) {
         {
             id: "state",
             label: invocation.state,
-            title: invocation.state,
+            title: "",
             class: stateClass(invocation.state),
             visible: true,
         },
diff --git a/client/src/components/Workflow/List/WorkflowCard.vue b/client/src/components/Workflow/List/WorkflowCard.vue
index 863c98db328..49f9dd82028 100644
--- a/client/src/components/Workflow/List/WorkflowCard.vue
+++ b/client/src/components/Workflow/List/WorkflowCard.vue
@@ -18,7 +18,6 @@ interface Props {
     filterable?: boolean;
     publishedView?: boolean;
     editorView?: boolean;
-    compact?: boolean;
     current?: boolean;
     selected?: boolean;
     selectable?: boolean;
@@ -32,7 +31,6 @@ const props = withDefaults(defineProps<Props>(), {
     hideRuns: false,
     filterable: true,
     editorView: false,
-    compact: false,
     current: false,
     selected: false,
     selectable: false,
@@ -134,7 +132,7 @@ function onKeyDown(event: KeyboardEvent) {
         can-rename-title
         :title="workflowCardTitle"
         :title-badges="workflowCardTitleBadges"
-        :title-n-lines="props.compact ? 2 : undefined"
+        :title-n-lines="2"
         :description="description || ''"
         :grid-view="props.gridView"
         :badges="workflowCardBadges"
diff --git a/client/src/components/Workflow/List/WorkflowCardList.vue b/client/src/components/Workflow/List/WorkflowCardList.vue
index 3ab5663148a..915ac13c387 100644
--- a/client/src/components/Workflow/List/WorkflowCardList.vue
+++ b/client/src/components/Workflow/List/WorkflowCardList.vue
@@ -19,7 +19,6 @@ interface Props {
     filterable?: boolean;
     publishedView?: boolean;
     editorView?: boolean;
-    compact?: boolean;
     currentWorkflowId?: string;
     selectedWorkflowIds?: SelectedWorkflow[];
     itemRefs?: Record<string, Ref<InstanceType<typeof WorkflowCard> | null>>;
@@ -33,7 +32,6 @@ const props = withDefaults(defineProps<Props>(), {
     filterable: true,
     publishedView: false,
     editorView: false,
-    compact: false,
     currentWorkflowId: "",
     selectedWorkflowIds: () => [],
     itemRefs: () => ({}),
@@ -107,7 +105,6 @@ const workflowPublished = ref<InstanceType<typeof WorkflowPublished>>();
             :filterable="props.filterable"
             :published-view="props.publishedView"
             :editor-view="props.editorView"
-            :compact="props.compact"
             :current="workflow.id === props.currentWorkflowId"
             :clickable="props.clickable"
             :highlighted="props.rangeSelectAnchor?.id === workflow.id"

From ca2abaeb8173b48c8de628197296e88447656285 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 May 2026 11:32:26 -0400
Subject: [PATCH 07/12] use `RenameModal` in history list as well

---
 client/src/components/History/HistoryCard.vue |  8 ++++-
 .../components/History/HistoryCardList.vue    | 34 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/HistoryCard.vue b/client/src/components/History/HistoryCard.vue
index fa1a9b4e4ec..98f2a20d950 100644
--- a/client/src/components/History/HistoryCard.vue
+++ b/client/src/components/History/HistoryCard.vue
@@ -143,6 +143,12 @@ const emit = defineEmits<{
      */
     (e: "titleClick", history: AnyHistoryEntry["id"]): void;
 
+    /**
+     * Emitted when the rename action is triggered
+     * @event rename
+     */
+    (e: "rename", id: string, name: string): void;
+
     /**
      * Emitted when a tag is clicked for filtering
      * @event tagClick
@@ -270,7 +276,7 @@ function onKeyDown(event: KeyboardEvent) {
         :clickable="props.clickable"
         :highlighted="props.highlighted"
         @titleClick="onTitleClick"
-        @rename="() => router.push(`/histories/rename?id=${history.id}`)"
+        @rename="emit('rename', history.id, history.name)"
         @select="isMyHistory(history) && emit('select', history)"
         @tagsUpdate="(tags) => onTagsUpdate(history.id, tags)"
         @tagClick="(tag) => emit('tagClick', tag)"
diff --git a/client/src/components/History/HistoryCardList.vue b/client/src/components/History/HistoryCardList.vue
index ff3e0e60550..413a53b8637 100644
--- a/client/src/components/History/HistoryCardList.vue
+++ b/client/src/components/History/HistoryCardList.vue
@@ -23,11 +23,13 @@
  *   @tagClick="onTagClick" />
  */
 
-import type { Ref } from "vue";
+import { reactive, type Ref, ref } from "vue";
 
 import type { AnyHistoryEntry, MyHistory } from "@/api/histories";
 import { isMyHistory } from "@/api/histories";
+import { useHistoryStore } from "@/stores/historyStore";
 
+import RenameModal from "@/components/Common/RenameModal.vue";
 import HistoryCard from "@/components/History/HistoryCard.vue";
 
 interface Props {
@@ -150,6 +152,28 @@ const emit = defineEmits<{
      */
     (e: "on-history-card-click", history: AnyHistoryEntry, event: Event): void;
 }>();
+
+const historyStore = useHistoryStore();
+
+const modalOptions = reactive({
+    rename: {
+        id: "",
+        name: "",
+    },
+});
+
+const showRename = ref(false);
+
+function onRenameClose() {
+    showRename.value = false;
+    emit("refreshList", true, true);
+}
+
+function onRename(id: string, name: string) {
+    modalOptions.rename.id = id;
+    modalOptions.rename.name = name;
+    showRename.value = true;
+}
 </script>
 
 <template>
@@ -173,8 +197,16 @@ const emit = defineEmits<{
             @tagClick="(...args) => emit('tagClick', ...args)"
             @refreshList="(...args) => emit('refreshList', ...args)"
             @updateFilter="(...args) => emit('updateFilter', ...args)"
+            @rename="onRename"
             @on-key-down="(...args) => emit('on-key-down', ...args)"
             @on-history-card-click="(...args) => emit('on-history-card-click', ...args)" />
+
+        <RenameModal
+            v-if="showRename"
+            item-type="history"
+            :name="modalOptions.rename.name"
+            :rename-action="(newName) => historyStore.updateHistory(modalOptions.rename.id, { name: newName })"
+            @close="onRenameClose" />
     </div>
 </template>
 

From 89afc9dfea799243550dba858e5efcf88228cb28 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 May 2026 11:49:15 -0400
Subject: [PATCH 08/12] fix history list cards primary actions; enforce rename
 button visibility

Fixes https://github.com/galaxyproject/galaxy/issues/21839

The previous styling commits also resolved all the bugs from this issue.
---
 client/src/components/Common/GCard.vue               | 8 --------
 client/src/components/History/HistoryCard.vue        | 9 +++------
 client/src/components/Workflow/List/WorkflowCard.vue | 2 +-
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Common/GCard.vue b/client/src/components/Common/GCard.vue
index 10077370d3f..c44889001e3 100644
--- a/client/src/components/Common/GCard.vue
+++ b/client/src/components/Common/GCard.vue
@@ -756,17 +756,9 @@ function onKeyDown(event: KeyboardEvent) {
     }
 
     .g-card-rename {
-        visibility: hidden;
         align-self: flex-start;
     }
 
-    &:hover,
-    &:focus-within {
-        .g-card-rename {
-            visibility: visible;
-        }
-    }
-
     .g-card-content {
         background-color: $body-bg;
         border: 1px solid $brand-secondary;
diff --git a/client/src/components/History/HistoryCard.vue b/client/src/components/History/HistoryCard.vue
index 98f2a20d950..15ecd794b6a 100644
--- a/client/src/components/History/HistoryCard.vue
+++ b/client/src/components/History/HistoryCard.vue
@@ -29,7 +29,6 @@
 
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { userOwnsHistory } from "@/api";
 import type { AnyHistoryEntry } from "@/api/histories";
@@ -120,8 +119,6 @@ const props = withDefaults(defineProps<Props>(), {
     highlighted: false,
 });
 
-const router = useRouter();
-
 const historyStore = useHistoryStore();
 
 const userStore = useUserStore();
@@ -184,8 +181,8 @@ const emit = defineEmits<{
  * Handles clicking on the history title to navigate to the history view
  * @function onTitleClick
  */
-function onTitleClick() {
-    router.push(`/histories/view?id=${props.history.id}`);
+async function onTitleClick() {
+    await historyStore.setCurrentHistory(props.history.id);
 }
 
 /**
@@ -195,7 +192,7 @@ function onTitleClick() {
 const historyCardTitle = computed(() => {
     return {
         label: props.history.name,
-        title: localize("Click to view this history"),
+        title: localize("Click to set as current"),
         handler: onTitleClick,
     };
 });
diff --git a/client/src/components/Workflow/List/WorkflowCard.vue b/client/src/components/Workflow/List/WorkflowCard.vue
index 49f9dd82028..0eb66715a63 100644
--- a/client/src/components/Workflow/List/WorkflowCard.vue
+++ b/client/src/components/Workflow/List/WorkflowCard.vue
@@ -129,7 +129,7 @@ function onKeyDown(event: KeyboardEvent) {
     <GCard
         :id="workflow.id"
         class="workflow-card"
-        can-rename-title
+        :can-rename-title="!props.workflow.deleted"
         :title="workflowCardTitle"
         :title-badges="workflowCardTitleBadges"
         :title-n-lines="2"

From 5fbcbd55a4187a2723da551616a87edcc17ff39d Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Sat, 9 May 2026 16:29:33 -0500
Subject: [PATCH 09/12] fix test_rename_history for RenameModal and async
 rename XHR timing

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../selenium/test_histories_list.py           | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/lib/galaxy_test/selenium/test_histories_list.py b/lib/galaxy_test/selenium/test_histories_list.py
index 8ff963235b3..e38acb7c4b8 100644
--- a/lib/galaxy_test/selenium/test_histories_list.py
+++ b/lib/galaxy_test/selenium/test_histories_list.py
@@ -65,12 +65,19 @@ class TestSavedHistories(SharedStateSeleniumTestCase):
 
         self.select_history_card_operation("Unnamed history", '[id^="g-card-rename-history-"]')
 
-        # Rename the history
-        history_name_input = self.wait_for_selector(".ui-form-element input.ui-input")
-        history_name_input.clear()
+        # Rename the history using the RenameModal.
+        # Clear via JS + dispatch Vue-compatible input event so nameModel is updated to empty,
+        # then type the new name so each keystroke fires input events and updates nameModel.
+        history_name_input = self.wait_for_selector("#history-name-input")
+        self.execute_script(
+            "arguments[0].value = ''; arguments[0].dispatchEvent(new Event('input', {bubbles: true}));",
+            history_name_input,
+        )
         history_name_input.send_keys(self.history1_name)
 
-        self.wait_for_and_click_selector("button#submit")
+        self.wait_for_and_click_selector(".g-modal-confirm-buttons button:last-child")
+        # Wait for the rename API call to complete (modal closes in the finally block)
+        self.wait_for_selector_absent_or_hidden("#history-name-input")
 
         self.navigate_to_histories_page()
 
@@ -368,3 +375,7 @@ class TestSavedHistories(SharedStateSeleniumTestCase):
     def create_history(self, name):
         self.home()
         self.history_panel_create_new_with_name(name)
+        # Wait for the panel label to reflect the new name, confirming the
+        # rename XHR has completed before any subsequent home() navigation
+        # that would otherwise cancel the still-in-flight request.
+        self.wait_for_selector(f'[data-description="name display"][title="{name}"]')

From bb5516cf4773989bf5dd82c9292ee144bcaa7098 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 19 May 2026 17:15:39 -0500
Subject: [PATCH 10/12] fix tool panel view selector wrapping inconsistencies

Everything (panel icon, name, caret down and favorite filter button) appears on baseline (flex-start) now.
---
 client/src/components/Panels/Menus/PanelViewMenu.vue | 11 ++++++-----
 client/src/components/Panels/ToolPanel.vue           |  3 +++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Panels/Menus/PanelViewMenu.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue
index 841dd8017ae..279ff685a32 100644
--- a/client/src/components/Panels/Menus/PanelViewMenu.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenu.vue
@@ -68,9 +68,10 @@ const toolPanelHeader = computed(() => {
     }
 });
 
-const headingClass = computed(() =>
-    currentPanelView.value !== "default" && !isFavoritesView.value ? "font-italic" : "",
-);
+const headingClass = computed<Record<string, boolean>>(() => ({
+    "font-italic": currentPanelView.value !== "default" && !isFavoritesView.value,
+    "text-left": true,
+}));
 const showPanelIcon = computed(() => !!panelIcon.value && !loading.value);
 
 const groupedPanelViews = computed(() => {
@@ -136,10 +137,10 @@ async function updatePanelView(panel: Panel) {
         <template v-slot:button-content>
             <span class="sr-only">View all tool panel configurations</span>
             <div class="d-flex panel-view-selector justify-content-between flex-gapx-1">
-                <div>
+                <div class="d-flex flex-gapx-1">
                     <FontAwesomeIcon
                         v-if="showPanelIcon && !isFavoritesView"
-                        class="mr-1"
+                        class="mr-1 mt-1"
                         :icon="panelIcon"
                         data-description="panel view header icon" />
                     <Heading id="toolbox-heading" :class="headingClass" h2 inline size="sm">
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index c274dee37e9..dbe9d0dabba 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -128,6 +128,9 @@ initializePanel();
     :deep(.activity-panel-header) {
         margin-right: 1rem;
         margin-left: 1rem;
+        .activity-panel-header-top {
+            align-items: flex-start;
+        }
     }
 }
 </style>

From 2b187a2bc35c680f5d659fd8224d1133bd41a8ee Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 May 2026 11:28:24 -0500
Subject: [PATCH 11/12] wait for dialog to open in
 test_delete_and_undelete_history

---
 client/src/components/Common/GCard.vue  | 24 ++++++++++++++++++++++--
 lib/galaxy/selenium/navigates_galaxy.py | 11 +++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Common/GCard.vue b/client/src/components/Common/GCard.vue
index c44889001e3..b0dec9c01a4 100644
--- a/client/src/components/Common/GCard.vue
+++ b/client/src/components/Common/GCard.vue
@@ -268,6 +268,17 @@ const emit = defineEmits<{
 
 const bookmarkLoading = ref(false);
 
+// Track open state of the extra-actions dropdown so the card can raise its
+// stacking context while open. Without this, the open menu can visually drop
+// over the next card row but get pixel-intercepted by that card's primary
+// action buttons (see issue surfaced by Selenium test_delete_and_undelete_history).
+const extraActionsOpen = ref(false);
+
+function onExtraDropdown(open: boolean) {
+    extraActionsOpen.value = open;
+    emit("dropdown", open);
+}
+
 /**
  * Toggles bookmark status with loading state
  */
@@ -316,6 +327,7 @@ function onKeyDown(event: KeyboardEvent) {
             { 'g-card-published': published },
             { 'g-card-clickable': props.clickable },
             { 'g-card-dim': props.dimWhenUnselected && !props.selected },
+            { 'g-card-dropdown-open': extraActionsOpen },
             containerClass,
         ]"
         :tabindex="props.clickable ? 0 : undefined"
@@ -464,8 +476,8 @@ function onKeyDown(event: KeyboardEvent) {
                                         title="More options"
                                         toggle-class="inline-icon-button"
                                         variant="link"
-                                        @show="() => emit('dropdown', true)"
-                                        @hide="() => emit('dropdown', false)">
+                                        @show="() => onExtraDropdown(true)"
+                                        @hide="() => onExtraDropdown(false)">
                                         <template v-slot:button-content>
                                             <FontAwesomeIcon :icon="faCaretDown" fixed-width />
                                         </template>
@@ -693,6 +705,14 @@ function onKeyDown(event: KeyboardEvent) {
     container: g-card / inline-size;
     width: 100%;
 
+    // While the extra-actions dropdown is open, raise this card above its
+    // siblings so the menu does not get pixel-intercepted by a neighboring
+    // card's primary action buttons drawn at the same screen coordinates.
+    &.g-card-dropdown-open {
+        position: relative;
+        z-index: 2;
+    }
+
     &.g-card-grid-view {
         width: calc(100% / 3);
 
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index f098aa7cb31..635953b7a75 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -778,12 +778,19 @@ class NavigatesGalaxy(HasDriverProxy[WaitType]):
         target_card = self.get_history_card(card_name)
 
         if is_in_extra:
+            # Open the extra-actions dropdown and click the menu item directly.
+            # Bootstrap-vue keeps menu items in the DOM for every card, so the
+            # action lookup must be scoped to target_card to avoid picking a
+            # match from a closed dropdown on another card.
             target_card.find_element(By.CSS_SELECTOR, '[id^="g-card-extra-actions-history-"]').click()
+            self.sleep_for(self.wait_types.UX_RENDER)
+            target_card.find_element(By.CSS_SELECTOR, action_selector).click()
+            return
 
-        action_selector = target_card.find_element(By.CSS_SELECTOR, action_selector)
+        action_element = target_card.find_element(By.CSS_SELECTOR, action_selector)
         # Hover over parent card first to activate hover state in headless mode
         self.action_chains().move_to_element(target_card).perform()
-        self.move_to_and_click(action_selector)
+        self.move_to_and_click(action_element)
 
     def edit_dataset_dbkey(self, dbkey_text):
         # precondition: need to be on the dataset edit component

From 9e1490c9e8256b89edb957390a058f4f9fc759ad Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Thu, 21 May 2026 20:24:47 +0200
Subject: [PATCH 12/12] allow GCard extra-actions menu to escape content
 overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the popper-positioned menu flips above the toggle (no space below),
the overflow:hidden on .g-card-content was clipping it. Selenium then
saw the element at its transformed coordinates but the click went to
whatever painted there visually — a neighboring card's primary action
button — surfacing as ElementClickInterceptedException.
---
 client/src/components/Common/GCard.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Common/GCard.vue b/client/src/components/Common/GCard.vue
index b0dec9c01a4..e53114289de 100644
--- a/client/src/components/Common/GCard.vue
+++ b/client/src/components/Common/GCard.vue
@@ -707,10 +707,16 @@ function onKeyDown(event: KeyboardEvent) {
 
     // While the extra-actions dropdown is open, raise this card above its
     // siblings so the menu does not get pixel-intercepted by a neighboring
-    // card's primary action buttons drawn at the same screen coordinates.
+    // card's primary action buttons drawn at the same screen coordinates,
+    // and relax the content's overflow:hidden so popper-positioned menu
+    // items (especially when flipped above the toggle) are not clipped.
     &.g-card-dropdown-open {
         position: relative;
         z-index: 2;
+
+        .g-card-content {
+            overflow: visible;
+        }
     }
 
     &.g-card-grid-view {