[Mbeaulne]

Description

Intent

Make task Properties consistent when moving between the pipeline editor and a run.

Current behavior

The run view uses a larger task title and different spacing than the editor. Its download and copy actions sit in a separate row below the component bar, while the editor keeps those actions in a menu on the bar.

What changes

Run task titles, header padding, component spacing, and tab alignment now match the editor. Both screens share the component bar, with View YAML on the bar and More actions beside it. In a run, the menu contains Download YAML, Download Python when source code is available, Copy YAML, and Copy node link. The editor keeps Edit Component for editable pipelines; runs remain read-only. The component bar uses the app's shared button styling and theme colors.

Editor

Run

How to test

Prerequisite: a pipeline with an existing run, such as a Hello World pipeline containing a Greet task. Use a component with Python source to check the optional Python download.

1. Open the pipeline in the editor and select its task. Note the task title and component bar in Properties.
2. Open the matching run from All Runs and select the same task. Confirm the title's size, weight, side padding, and gap above the component bar match the editor. Confirm the separate action row is gone.
3. Click View YAML on the component bar. Confirm the component YAML opens read-only, then close the viewer.
4. Open More actions. Confirm it contains Download YAML, Copy YAML, and Copy node link, plus Download Python when Python source is available. Confirm there is no Edit Component action in a run.
5. Use the copy actions, paste their results, and confirm they contain the component YAML and a link to the selected task. Download the YAML and Python files and confirm their contents match the component.
6. Return to the editable pipeline. Confirm More actions → Edit Component opens the component editor, then close it without saving.
7. In the run, open Artifacts, Details, and Logs, then maximize and restore Properties. Confirm the content stays accessible and the header remains aligned.

Related Issue and Pull requests

Depends on #2974. This PR targets MB/run-task-component-name and adds the matching title spacing and action layout.

Type of Change

• Improvement

Line Breakdown

Category	Added	Removed
Production code	259	233
Comments	0	1
Total	259	234

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

The UI was checked locally in the matching editor and run: title spacing, docked and maximized Properties, tabs, both action menus, keyboard activation of component details and focus return in the editor, the read-only YAML viewer, copy confirmation messages, and opening and closing Edit Component without saving. The copy payloads were not verified. Browser download permission was denied, so downloaded files were not verified. The steps above include those remaining manual checks.

Local automated checks passed: 15 focused tests across four existing test files, ESLint and Prettier for the changed files, and the Git whitespace check. Earlier local typechecking reported five existing Tangent SDK errors in unrelated resource integration files; none are in the changed files. The full unit suite, browser tests, type checking, lint, formatting, Knip, CodeQL, and extension checks passed in CI for commit f43a67276.

The semantic icon color is defined in both theme palettes. Visual verification of a subgraph task in both themes remains manual; use the appearance-check step above.

Additional Comments

The parent PR provides the shared component-name row. This follow-up reuses the editor's action layout and preserves the existing YAML content, download filenames, and read-only restrictions. Staging has not been tested.

[github-actions]

🎩 Preview

A preview build has been created at: MB/properties-title-spacing/52230d1