Settings layout

SettingsPage, SettingsPageHeader, SettingsSection, SettingsRows and SettingsRow from packages/ui — the register both dashboards' settings pages are built from, including the widths where its two columns stop fitting side by side.

A composed page

One h1 from SettingsPageHeader, then one h2 per section. The register's rules come from SettingsRows, so a section with a single row still reads as part of the same table.

SettingsPage

Settings

Company

Set when the account was created.

Company name
The name that appears in the CFX network if you have a public account. To change it, contact support.
Acme Labs Inc.
Your customer ID
Other customers can confirm it is you if this ID matches.

Workspace

Workspace name
Shown in the workspace switcher and on invitations.

What a row's content cell holds

The same register carries a read-only value, a copyable ID and a multi-field form. A row that holds a form is the case that breaks a naive two-column grid, because the label must stay top-aligned with the form's first field rather than centred against the whole thing.

Plain value
A string, nothing more.
Acme Labs Inc.
A long description
Long enough to wrap inside the label column at every width, which is where a fixed-height row would start clipping. This copy exists to push that wrap past two lines so the row's vertical rhythm is visible against its neighbours.
Wrapped, not clipped.
A whole form
Two fields and a submit, each labelled in its own right — so unlike the single-field rows, these labels are not a repeat of the row's.
No description
The label column collapses to one line.

Where the columns collapse

SettingsRows is a @container and SettingsRow queries it at @2xl, so the label stacks on top of the content when the register itself is narrow — not when the viewport is. A row inside a side panel collapses while the same row on a full page does not.

320px

Workspace name
Shown in the workspace switcher.

Stacked: label, description, then content.

720px

Workspace name
Shown in the workspace switcher.

Past @2xl, so the label sits beside the content.