Fix Wizards card not growing

[khairul-syazwan]

Problem

On the Wizards page the white card stops partway down a tall form. The fields below it — Diastolic Blood Pressure, Years, Conditions — and the Back / Open cohort buttons render on the grey page background.

Reported on release/v0.17.0-beta; develop renders correctly.

Root cause

Two rules interact across the single-spa boundary.

plugins/ui/apps/portal/src/containers/researcher/Researcher.scss targets the portal's own <main> with a descendant selector:

.researcher__container {
  main { flex: auto; min-height: 0; }   // specificity (0,1,1)
}

WizardShell.tsx renders the white card as <main class="content"> nested inside that container, so the rule lands on it too. The min-height: 0 removes the flex automatic minimum size that would otherwise floor the card at its content height.

branch	card rule	specificity	winner	computed flex	result
release/v0.17.0-beta	.content { flex: 1 }	(0,1,0)	portal rule	1 1 auto	shrinks below content
develop	.shell > .content { flex: 1 0 auto }	(0,2,0)	app rule	1 0 auto	grows with content

.shell has height: calc(100vh - 56px), so the container height is definite and the card gets shrunk to fit it.

Why develop is already fixed

The .shell > .content { flex: 1 0 auto } line came from #2897 (5dda8a5c5), sub-commit "fix(wizards): grow form card with content". git branch -r --contains 5dda8a5c5 lists only develop and its merge-queue refs — no release branch. #2897 is a ~3,000-line feature PR (Shiny dashboard embedding, bookmark cache, MRI query comparator), so it was never back-ported. This PR ports just the layout line.

Note for anyone who lands here from #2954: that commit is already on this branch, but it fixes the researcher dataset-information card — a structurally similar bug in a different file. It does not touch the Wizards app.

Change

plugins/ui/apps/wizards/src/components/WizardShell.module.css, one rule:

.shell > .content {
  flex: 1 0 auto;
  /* rest unchanged */
}

.shell > outranks the portal rule; flex-shrink: 0 keeps the card from being squeezed below its content once the min-height floor is gone. flex-grow: 1 is retained so the card still fills the viewport when a wizard's content is short.

<main class="content"> is the only element in the wizards app the portal's descendant selector can match, so the change is scoped to this one rule. The other flex: 1 in the app (StepForm.module.css .groupInputs .input) is a horizontal row input and is unaffected.

Verification

Measured on this branch's source at 1440x900, Calculate Incidence wizard, with the portal's two Researcher.scss rules applied. Those rules are byte-identical on develop and this branch, so the wizards app source is the only variable.

source	computed flex	white card	content	spill past card
develop	1 0 auto	1317px	1317px	0px
this branch, before fix	1 1 auto	780px	1345px	565px
this branch, after fix	1 0 auto	1345px	1345px	0px

The before-fix run reproduces the reported screenshot exactly.

Test plan

• Card grows with content — tall form (Calculate Incidence) fully enclosed by the white background, including the Back / Open cohort row
• Card still fills the viewport when content is short (flex-grow: 1 retained)
• Visual check on a deployed release/v0.17.0-beta instance with the wizards feature flag enabled

Verification caveats

• Reproduced on the wizards app's standalone dev server with the portal's researcher rules injected, not on a deployed 0.17 portal. The local platform could not serve the page: the Wizards plugin is registered defaultEnabled: false and the deployed trex plugin manifest carries no Wizards nav entry, so /researcher/wizards redirects to /researcher/information.
• No automated test accompanies the change — the repo has no layout/visual coverage for this app, and a mounted-DOM unit test asserting computed flex would not exercise the cross-app specificity conflict that causes the bug.