improvement(responsive): Select fluid + width-less controls keep size (CUI-36)

[JeanMarcMilletScality]

TL;DR — Extends the responsive Form treatment beyond Input: a Select now shrinks to fit its column (and auto-enables inside a <Form responsive>), and a width-less control such as a TextArea keeps its intrinsic size in the fluid column instead of being stretched to fill it.

Context

CUI-32 made Form/Input responsive but, as documented there, only Input was fluid — Select, SearchInput, TextArea kept their width and overflowed a shrinking column. CUI-36 is the follow-up that closes that gap for the remaining inputs. This PR is rebased onto the merged CUI-32 grid layout (its earlier stacked-on-CUI-32 history was dropped in favor of the final merged version).

Approach

Select fluid (selectv2). Add a fluid prop mirroring Input: the size-derived width becomes a preferred width (max-width: 100%; min-width: 0) that shrinks to fit its column instead of overflowing, and the menu widens to match. fluid turns on automatically when the Select sits inside a <Form responsive> (read from the FormGroup FieldContext), so a responsive Form makes its Selects shrink with no per-field prop. Opt-in and non-breaking outside a responsive Form.

Width-less controls keep their size (form). With helpErrorPosition="bottom" the field sits in a vertical Stack whose default align-items: normal (stretch) stretched a control sized only by its cols (a TextArea) to fill the fluid 1fr column. The field content is now left-aligned in that case, so the control keeps its intrinsic size. Input is unaffected (max-width: 100%); the horizontal (help-on-right) and non-responsive layouts are untouched.

Review focus

• 🟡 selectv2/Selectv2.component.tsx — fluid plumbing + auto-on via useFieldContext; confirm a Select outside a responsive Form is unchanged.
• ⚪ selectv2/SelectStyle.ts — fluid → max-width: 100%; min-width: 0 and menu width: 100%.
• ⚪ form/Form.component.tsx — align-items: flex-start only in responsive + non-right help position.

How to test

• Storybook → Templates/Form with responsive — a Select shrinks with the column; a TextArea stays at its cols size rather than stretching. Sanity-check a plain Select (no Form) looks unchanged.
• Jest — npx jest src/lib/components/form src/lib/components/selectv2

References

• CUI-32 — responsive/fluid Form + Input (merged, the base for this work).
• CUI-36 — extend fluid to Select / SearchInput / TextArea / horizontal RadioGroup (this PR).

[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	⭐
/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 TBA
/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:

• @JeanMarcMilletScality

• @MonPote

• @ChengYanJin

• @JBWatenbergScality

• @damiengillesscality

• @ZiyangLinScality

• @hervedombya

[claude]

alignItems: 'flex-start' on the whole Stack prevents width-less controls from stretching (the goal), but it also prevents HelperText children from stretching to the column width. A span-based flex item with flex-start gets its content width (max-content), so a long error or help message won't wrap at the column boundary — it stays on one line and can overflow horizontally.

Consider applying alignSelf: 'flex-start' only to the {content} element (via a wrapper <div>) instead, and leaving the Stack at its default alignment. That way the control keeps its intrinsic size while HelperText still stretches and wraps normally.