backport: #3665 to release-1.10

[lokanandaprabhu]

Backport of #3665 to release-1.10

Original PR: #3665
Plugin: orchestrator
Release: 1.10

Cherry-picked commit: 00f80fce57

---

Auto-generated by backport skill.

[rhdh-qodo-merge]

PR Summary by Qodo

Orchestrator: fix Workflow Instance card overlap in content height mode

🐞 Bug fix 📝 Documentation 🕐 20-40 Minutes

AI Description

• Prevent Workflow Instance cards from overlapping when cardHeightMode is content.
• Switch content-height layout to a constrained 2-column CSS grid with min-width fixes.
• Add overflow-safe metadata table styling for inputs/results and ship a patch changeset.

Diagram

graph TD
  A["WorkflowInstancePageContent"] --> B{cardHeightMode?} --> C["Fixed-height: MUI Grid"]
  B --> D["Content-height: CSS grid"] --> E["Column A"] --> F["Details + Inputs"]
  D --> G["Column B"] --> H["Result + Progress"]
  F --> I["StructuredMetadataTable"]
  H --> I

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Keep MUI Grid in content mode; fix overflow with minWidth/zeroMinWidth only

• ➕ Less structural change; keeps a single layout mechanism (Grid) for both modes
• ➕ Potentially fewer CSS classes
• ➖ Harder to guarantee equal-width columns with long table content; overflow behavior can be inconsistent across nested Grid containers
• ➖ More prone to regression when card internals change (tables/long strings)

2. Centralize overflow constraints in shared card/table components

• ➕ One fix benefits all pages using metadata tables and InfoCards
• ➕ Reduces repeated styling wrappers
• ➖ Wider blast radius for a backport; could change behavior on unrelated pages
• ➖ Needs broader regression testing across plugin UIs

Recommendation: The PR’s approach (CSS grid with minmax(0, 1fr) plus explicit min-width/overflow constraints around table-heavy content) is the most reliable, low-risk way to stop cross-column bleed in content-height mode. For a 1.10 backport, it keeps changes local to the Workflow Instance page while addressing the root cause (unconstrained intrinsic widths from tables/long strings).

Files changed (5) +97 / -26

Bug fix (4) +92 / -26

WorkflowInputs.tsxConstrain inputs metadata table to prevent horizontal overflow +22/-1

Constrain inputs metadata table to prevent horizontal overflow

• Adds 'tss-react' styles to wrap 'StructuredMetadataTable' in an overflow-safe container. Forces fixed table layout and enables word breaking so long values don’t expand the card beyond its column.

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowInputs.tsx

WorkflowInstancePageContent.tsxUse CSS grid 2-column layout for content-height mode and fix card overflow +53/-24

Use CSS grid 2-column layout for content-height mode and fix card overflow

• Introduces dedicated content-mode classes to ensure cards and their content can shrink ('minWidth: 0') and scroll horizontally when needed. Replaces the nested Grid-column layout in content mode with a two-column CSS grid using 'minmax(0, 1fr)' to prevent card overlap/bleed between columns.

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowInstancePageContent.tsx

WorkflowResult.tsxMake result values table overflow-safe and shrinkable +11/-0

Make result values table overflow-safe and shrinkable

• Adds min-width and overflow constraints to the result table container. Ensures tables use fixed layout with word breaks to avoid expanding beyond card boundaries in content-height mode.

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx

WorkflowRunDetails.tsxAllow details Grid container to shrink in narrow layouts +6/-1

Allow details Grid container to shrink in narrow layouts

• Adds 'sx={{ minWidth: 0 }}' to the details Grid container to prevent intrinsic-width overflow. Helps keep the details card within its column when content-height mode is used.

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowRunDetails.tsx

Documentation (1) +5 / -0

fix-workflow-instance-content-layout.mdAdd patch changeset for Workflow Instance layout overlap fix +5/-0

Add patch changeset for Workflow Instance layout overlap fix

• Introduces a changeset marking a patch release for the orchestrator plugin. Documents the fix for card overlap when 'cardHeightMode' is set to 'content'.

workspaces/orchestrator/.changeset/fix-workflow-instance-content-layout.md

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[rhdh-qodo-merge]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 9 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (orchestrator/release-1.10@04a8391). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@                     Coverage Diff                      @@
##             orchestrator/release-1.10    #4098   +/-   ##
============================================================
  Coverage                             ?   59.57%           
============================================================
  Files                                ?     2097           
  Lines                                ?    65234           
  Branches                             ?    17001           
============================================================
  Hits                                 ?    38862           
  Misses                               ?    25980           
  Partials                             ?      392           

Flag	Coverage Δ		*Carryforward flag
adoption-insights	83.58% <ø> (?)		Carriedforward from 18023a1
ai-integrations	70.03% <ø> (?)		Carriedforward from 18023a1
app-defaults	69.60% <ø> (?)		Carriedforward from 18023a1
augment	69.36% <ø> (?)		Carriedforward from 18023a1
bulk-import	72.86% <ø> (?)		Carriedforward from 18023a1
cost-management	16.49% <ø> (?)		Carriedforward from 18023a1
dcm	32.85% <ø> (?)		Carriedforward from 18023a1
extensions	61.79% <ø> (?)		Carriedforward from 18023a1
global-floating-action-button	74.30% <ø> (?)		Carriedforward from 18023a1
global-header	61.68% <ø> (?)		Carriedforward from 18023a1
homepage	50.95% <ø> (?)		Carriedforward from 18023a1
konflux	91.01% <ø> (?)		Carriedforward from 18023a1
lightspeed	68.34% <ø> (?)		Carriedforward from 18023a1
mcp-integrations	81.59% <ø> (?)		Carriedforward from 18023a1
orchestrator	37.54% <0.00%> (?)
quickstart	62.64% <ø> (?)		Carriedforward from 18023a1
sandbox	79.56% <ø> (?)		Carriedforward from 18023a1
scorecard	83.58% <ø> (?)		Carriedforward from 18023a1
theme	64.54% <ø> (?)		Carriedforward from 18023a1
translations	8.49% <ø> (?)		Carriedforward from 18023a1
x2a	57.33% <ø> (?)		Carriedforward from 18023a1

*This pull request uses carry forward flags. Click here to find out more.

---

Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 04a8391...268f2c4. Read the comment docs.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[lokanandaprabhu]

Tested locally, working fine