Stepper: step content centres on the page again

[JeanMarcMilletScality]

TL;DR — Stepper: a page form used as a step sat visibly right of the page's centre line, and now sits on it.

Before, then after — Stepper › Guided setup at a 1512px frame, red line on the page's centre.
The form's own centre moves from x=934 to 756. Before is the same build with the row put back to its
pre-change layout, so only the row's CSS differs.

Context / Why

This is a regression. Until 0.230.0 a step form was content-sized, so the rail and the step were
left-packed and the form happened to land near the page centre. In 0.230.0 a containerized Form
gained flex: 1 1 auto; min-width: 0: it now fills the row's remainder and margin: 0 auto centres
its content on that column, 178px right of centre at a 1512px frame. That flex cannot be
reverted — container-type: inline-size removes the form's intrinsic width, so content-sized it
resolves to 0 — and the rail is asymmetric space only Stepper knows about.

🧩 Approach

The row becomes a three-track grid whose last track mirrors the rail's column on the right, so
whatever fills the middle centres on the page rather than on its column:

const RAIL_COLUMN = `calc(${STEPPERS_WIDTH} + ${STEP_GAP_PX}px)`;

grid-template-columns: ${RAIL_COLUMN} minmax(0, 1fr)
  max(0px, min(${RAIL_COLUMN}, calc(100% - ${RAIL_COLUMN} - ${PAGE_FORM_WIDTH})));

The min() is what makes that reservation safe: it only ever claims width left spare once a page
form has the content width it wants, so it gives way as the row narrows rather than squeezing the
form — full above a 1316px row, gone below roughly 1090px, where the layout is left-packed exactly
as it is today. The step is rendered in its own slot so the row always holds two children, and a
step rendering several top-level elements cannot be auto-placed into the reservation.

🔍 Review focus

• 🟡 steppers/Stepper.component.tsx › StepRow — the reservation applies to every step, not only a
  form, and a step that took its width from its own content now stretches to the middle track
  (measured at a 1808px row, a bordered step goes from 333px to 960px). Deliberate, but visible.
• 🟡 steppers/Steppers.component.tsx › Step — Steppers is also exported on its own and both
  changes apply there: a step's min-width is 18rem rather than 20rem, and its title box grows
  rather than clipping a wrapped label. The rail's spare width is now reserved twice, so trimming it
  moves the width at which centring degrades by double.
• ⚪ form/Form.constants.ts — new module, so a layout placing something beside a page form can read
  PAGE_FORM_WIDTH without pulling the whole Form module in. Not added to the index.ts barrel.

🧪 How to test

1. npm run storybook, open Stepper › Guided setup at a wide frame: the first step is a page
   form, and its content box is centred on the page rather than on the column right of the rail.
2. Narrow the window. The reservation gives way first, the form keeps its content width throughout,
   and below roughly a 1090px row the layout is left-packed as it is today.
3. Continue to Apply actions, a table laid directly in the step with no form around it: it fills
   the middle track and is inset symmetrically.

🔗 References

• CUI-66 — the off-centre step content, with the
  measurements and why reverting the Form change is not an option.
• CUI-67 — the rail's own floor. Once it collapses on
  narrow containers, taking the rail out of the flow centres the step at every width and this
  reservation goes away entirely.
• Guidelines/Responsive gains the general form of this: a container takes its width from the
  parent, so anything beside it has to be balanced on the other side.

Not in scope

Taking the rail out of the flow would centre the step content at every width without the trade-off
this PR makes — the form would keep its full width further down. It only works once the rail
collapses on narrow containers, otherwise it overlaps the step content, so it belongs with CUI-67.

[bert-e]

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options

name	description	privileged	authored
/after_pull_request	Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval	Bypass the pull request author's approval	⭐
/bypass_build_status	Bypass the build and test status	⭐
/bypass_commit_size	Bypass the check on the size of the changeset TBA	⭐
/bypass_incompatible_branch	Bypass the check on the source branch prefix	⭐
/bypass_jira_check	Bypass the Jira issue check	⭐
/bypass_peer_approval	Bypass the pull request peers' approval	⭐
/bypass_leader_approval	Bypass the pull request leaders' approval	⭐
/bypass_source_branch_lineage	Bypass the cross-branch contamination check	⭐
/approve	Instruct Bert-E that the author has approved the pull request.		✍️
/create_pull_requests	Allow the creation of integration pull requests.
/create_integration_branches	Allow the creation of integration branches.
/no_octopus	Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity	Change review acceptance criteria from one reviewer at least to all reviewers
/wait	Instruct Bert-E not to run until further notice.

Available commands

name	description	privileged
/help	Print Bert-E's manual in the pull request.
/status	Print Bert-E's current status in the pull request.
/clear	Remove all comments from Bert-E from the history TBA
/retry	Re-start a fresh build TBA
/build	Re-start a fresh build TBA
/force_reset	Delete integration branches & pull requests, and restart merge process from the beginning.
/reset	Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

[bert-e]

Waiting for approval

The following approvals are needed before I can proceed with the merge:

• the author

• one peer

Peer approvals must include at least 1 approval from the following list:

• @ZiyangLinScality

• @ChengYanJin

• @JeanMarcMilletScality

• @hervedombya

• @damiengillesscality

• @sanassicisse

• @JBWatenbergScality

• @PierreAlexandreDelgado

[bert-e]

Waiting for approval

The following approvals are needed before I can proceed with the merge:

• the author

• one peer

Peer approvals must include at least 1 approval from the following list:

• @ZiyangLinScality

• @hervedombya

• @ChengYanJin

• @damiengillesscality

• @sanassicisse

• @JeanMarcMilletScality

• @JBWatenbergScality

• @PierreAlexandreDelgado

[clement-scality]

The stepper story that uses a form is not responsive so it looks like the fix is not really applied

[JeanMarcMilletScality]

/approve

[bert-e]

In the queue

The changeset has received all authorizations and has been added to the
relevant queue(s). The queue(s) will be merged in the target development
branch(es) as soon as builds have passed.

The changeset will be merged in:

• ✔️ development/1.0

There is no action required on your side. You will be notified here once
the changeset has been merged. In the unlikely event that the changeset
fails permanently on the queue, a member of the admin team will
contact you to help resolve the matter.

IMPORTANT

Please do not attempt to modify this pull request.

• Any commit you add on the source branch will trigger a new cycle after the
  current queue is merged.
• Any commit you add on one of the integration branches will be lost.

If you need this pull request to be removed from the queue, please contact a
member of the admin team now.

The following options are set: approve

[bert-e]

I have successfully merged the changeset of this pull request
into targetted development branches:

• ✔️ development/1.0

Please check the status of the associated issue CUI-66.

Goodbye jeanmarcmilletscality.