`ClientConfig.InputsPaneWidth` — two-pane Layout inputs-pane width constraint (consumer migration)
ClientConfig.InputsPaneWidth — two-pane Layout inputs-pane width constraint (consumer migration)
What changes. The SDK shell's two-pane (PageContent.SplitPanel) render now wraps the inputs (left) child in a fixed-width container resolved from a new ClientConfig.InputsPaneWidth field. The default Narrow applies w-96 shrink-0 (24rem ≈ 384px), enforcing the "narrow inputs + wide results" design intent shell-side instead of relying on consumer modules to carry intrinsic-width form controls.
Calculator-shaped modules (form <input> / <select> children with intrinsic widths) settled naturally at ~400px under the prior unbounded layout and are unaffected by the default. Presentation-only modules (descriptive text + toggles, no form fields) had no intrinsic width and previously expanded across the row, squeezing the results pane to a narrow strip — those modules now sit in a constrained 24rem column, matching the visual the shell's flex-1 results pane was already signalling.
Scope. Client-side, shell-only. No server change. No public-surface rename. Consumers that already carried a w-96 shrink-0 workaround on their two-pane inputs root can drop it.
Diff to apply
Default behaviour (no change required)
Consumers on ClientConfig.defaults automatically inherit InputsPaneWidth = Narrow. If a consumer's modules are calculator-shaped (intrinsic-width form controls), the rendered output is byte-identical to today's natural settle width.
Drop a hand-rolled w-96 shrink-0 workaround
// Before — workaround on the inputs root inside the module's view:
let inputs =
Html.div [
prop.className "w-96 shrink-0"
prop.children [
// … form fields, descriptive text, etc.
]
]
SplitPanel(inputs, results)
// After — the shell wraps the inputs child; the module returns its
// natural inputs element:
let inputs =
Html.div [
prop.children [
// … form fields, descriptive text, etc.
]
]
SplitPanel(inputs, results)
Opt out for a balanced split
{ ClientConfig.defaults with
InputsPaneWidth = Wide } // 32rem fixed inputs column
Opt out to preserve today's natural-content-width behaviour byte-for-byte
{ ClientConfig.defaults with
InputsPaneWidth = Auto } // no width class — pre-shell-constraint shape
Verification
dotnet build ToolUp.Forge.slnclean.- Boot the consumer app; navigate to a two-pane module whose inputs pane was previously presentation-only — confirm the inputs column settles at ~24rem instead of expanding across the row, and the results pane fills the remainder.
- Navigate to a calculator-shaped module — confirm visual output is byte-identical to the prior version (the intrinsic widths land inside a wider container; the container does not change the rendered width).
- Toggle
InputsPaneWidth = Autoin a dev build and confirm today's natural-content-width layout returns byte-for-byte.
Rollback
Set ClientConfig.InputsPaneWidth = Auto on the consumer's composition root. The shell skips the width-wrap branch and renders the inputs child verbatim — equivalent to the pre-migration behaviour.
Consumers
The migration is N-A for calculator-shaped modules, where the default Narrow is byte-identical to today's layout, and for any deployment with no two-pane Layout usage. A consumer that has previously hand-rolled a fixed-width workaround (e.g. a w-96 shrink-0 class on its inputs root) drops the workaround on adoption.