[26.0] Fix WorkflowAnnotation wrapping inconsistencies

client/src/components/History/TargetHistoryLink.vue

@@ -38,7 +38,7 @@ const isCurrentTargetHistory = computed(() => {
                 v-else
                 v-b-tooltip.hover.noninteractive
                 data-description="not current history indicator"
-                class="text-warning"
+                class="text-warning text-nowrap"
                 title="This history is not your currently active history. You can click the link to switch to it.">
                 (not current)
             </span>

client/src/components/ProgressBar.vue

@@ -43,6 +43,9 @@ const props = withDefaults(defineProps<Props>(), {
     position: absolute;
     text-align: center;
     width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .progress-container {
     position: relative;

client/src/components/Workflow/WorkflowAnnotation.vue

@@ -42,7 +42,7 @@ const workflowTags = computed(() => {
 <template>
     <div v-if="workflow" class="pb-2 pl-2">
         <div class="d-flex justify-content-between align-items-center">
-            <div>
+            <div class="annotation-left">
                 <i v-if="timeElapsed" data-description="workflow annotation time info">
                     <FontAwesomeIcon :icon="faClock" class="mr-1" />
                     <span v-localize>
@@ -52,9 +52,11 @@ const workflowTags = computed(() => {
                 </i>
                 <TargetHistoryLink v-if="props.invocationCreateTime" :target-history-id="props.historyId" />
             </div>
-            <slot name="middle-content" />
-            <div class="d-flex align-items-center">
-                <div class="d-flex flex-column align-items-end mr-2 flex-gapy-1">
+            <div class="annotation-middle">
+                <slot name="middle-content" />
+            </div>
+            <div class="annotation-right">
+                <div class="annotation-right-content">
                     <WorkflowIndicators :workflow="workflow" published-view no-edit-time />
                     <WorkflowInvocationsCount v-if="owned" class="mr-1" :workflow="workflow" />
                 </div>
@@ -69,16 +71,66 @@ const workflowTags = computed(() => {
 </template>
 
 <style scoped lang="scss">
-.history-link-wrapper {
-    max-width: 300px;
-
-    &:deep(.history-link) {
-        .history-link-click {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            display: block;
-        }
+// Left column: 35% of the width
+.annotation-left {
+    flex: 1 1 0;
+    max-width: 35%;
+    min-width: 0;
+    overflow: hidden;
+
+    // Ensure neither the history name nor "(current)" escape the column.
+    :deep(.history-link-wrapper) {
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    // SwitchToHistoryLink root div must be able to shrink to 0 so the
+    // "(current)" label stays visible as long as there is any room.
+    :deep(.history-link-wrapper > div) {
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    :deep(.history-link) {
+        min-width: 0;
+    }
+
+    :deep(.history-link-click) {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: block;
+    }
+}
+
+// Middle column: 30% of the width
+.annotation-middle {
+    flex: 1 1 0;
+    max-width: 30%;
+    min-width: 0;
+}
+
+// Right column: 35% of the width
+.annotation-right {
+    flex: 1 1 0;
+    max-width: 35%;
+    min-width: 0;
+    overflow: hidden;
+    justify-content: flex-end;
+
+    .annotation-right-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.25rem;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    // Ensure creator badges stay within the column instead of overflowing
+    :deep(.workflow-indicators) {
+        flex-wrap: wrap;
+        justify-content: flex-end;
     }
 }
 </style>

client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue

@@ -310,7 +310,7 @@ async function onCancel() {
             :invocation-create-time="invocation.create_time"
             :history-id="invocation.history_id">
             <template v-slot:middle-content>
-                <div class="progress-bars mx-1">
+                <div class="w-100 mx-1">
                     <ProgressBar
                         v-if="!stepCount"
                         note="Loading step state summary..."
@@ -511,19 +511,3 @@ async function onCancel() {
     }
 }
 </style>
-
-<style scoped lang="scss">
-.progress-bars {
-    // progress bar shrinks to fit divs on either side
-    flex-grow: 1;
-    flex-shrink: 1;
-    max-width: 50%;
-
-    .steps-progress,
-    .jobs-progress {
-        // truncate text in progress bars
-        white-space: nowrap;
-        overflow: hidden;
-    }
-}
-</style>