fix(apollo-react): stage title input fills available header width [MST-7791]

[KodudulaAshishUiPath]

Description

• Fix stage title input not expanding to fill the available width in the stage header

Demo

Before

Screen.Recording.2026-03-23.at.15.16.55.mov

After

Screen.Recording.2026-03-23.at.15.25.01.mov

[github-actions]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-canvas	🟢 Ready	Preview, Logs	Mar 23, 2026, 03:01:52 AM
apollo-landing	🟢 Ready	Preview, Logs	Mar 23, 2026, 02:58:59 AM
apollo-ui-react	🟢 Ready	Preview, Logs	Mar 23, 2026, 03:00:38 AM
apollo-vertex	🟢 Ready	Preview, Logs	Mar 23, 2026, 03:00:12 AM
apollo-wind	🟢 Ready	Preview, Logs	Mar 23, 2026, 02:59:07 AM

[github-actions]

Dependency License Review

• ✅ 1916 package(s) scanned
• ✅ No license issues found
• ⚠️ 3 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1681
ISC	89
Apache-2.0	56
BSD-3-Clause	28
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	5
MIT OR Apache-2.0	3
MIT-0	3
CC0-1.0	3
LGPL-3.0-or-later	2
(MIT OR Apache-2.0)	2
Unlicense	2
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
@img/sharp-libvips-linuxmusl-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[Copilot]

Pull request overview

Fixes the stage header title editing UX in apollo-react by allowing the stage title input to expand and use the available header width.

Changes:

• Make the left header layout flexible (flex=1, minW=0) so the title region can grow/shrink correctly.
• Update stage title container/input styles to be full-width and remove the prior max-width constraint.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/apollo-react/src/canvas/components/StageNode/StageNode.tsx	Adjusts header layout flex behavior so the title area can take remaining space.
packages/apollo-react/src/canvas/components/StageNode/StageNode.styles.ts	Makes the title container/input full-width to fill available header width.

[Copilot]

StageTitleContainer is now width: 100% and conditionally adds a 1px border. Without box-sizing: border-box, the border increases the rendered width beyond 100%, which can cause the title area to overflow/clamp inside StageHeader (which has overflow: hidden) and visually clip the border when editing. Consider adding box-sizing: border-box (and/or moving the border to an inner element) so the container remains within the available width when the border is applied.

Suggested change

	width: 100%;
	width: 100%;
	box-sizing: border-box;

[Copilot]

padding: none is not a valid CSS value, so when isStageTitleEditable is true this rule will be dropped and the input will fall back to the browser default padding. Use a valid value like 0/0px (or the appropriate token-based padding) to ensure consistent sizing, especially now that the input is intended to fill the available width.

Suggested change

	padding: ${(props) => (props.isStageTitleEditable ? 'none' : `${Padding.PadS} 0px`)};
	padding: ${(props) => (props.isStageTitleEditable ? '0' : `${Padding.PadS} 0px`)};

[SreedharAvvari]

although this is unrelated to the PR, can we fix this as well?

[SreedharAvvari]

Did you test the inline edit behaviour?

[KodudulaAshishUiPath]

Did you test the inline edit behaviour?

Yes, I have added a story as well to test inline edit behaviour