refactor: account screens compose layout containers instead of Box

JU
2d ago
+510-180

Proposed changes (including videos or screenshots)

ARCH-2592
Follows #43159 (Text), now merged.

The screens under views/account stop laying themselves out with raw Box. The raw layout count drops from 1143 to 1113, and the CI limit drops with it.

  • New shared containers in client/components. Other areas already repeat both, so they skip the layout/ stage:
    • PageFormColumn: the centred, form-width column of a settings page (maxWidth='x600' width='full' alignSelf='center'). Ten screens across account, admin, omnichannel and marketplace use it; only the account ones switch here.
    • ModalForm: the form surface GenericModal's wrapperFunction needs. Twenty modals use the same <Box is='form'>.
  • Local containers in layout/ folders: ProfileNameFields, PreferencesInsetSection, LabelWithTag, TotpQrCode.
  • Spacing between blocks now comes from Stack gaps instead of block margins. Forms are plain <form> elements, and text uses Text.
  • New stories cover states the local app can't reach: the backup codes and delete-account modals, the TOTP panel (enabled and disabled), the two-factor email toggle, the E2EE password reset and the device row.

Visual changes, reviewed and accepted:

  • Backup codes modal: the content sits 8px higher and the modal is 16px shorter. The outer 8px margins around its text are gone.
  • Two-factor TOTP, enabled: "Backup codes" and what follows move up 8px.
  • Two-factor email: moves up 16px when shown on its own. On the Security page nothing moves, because the parent's 24px gap replaces the old 8px padding plus 16px margin.

No change: the profile page (wide and narrow), the custom status-expiry row, the Security page and the omnichannel preferences in the running app, and the device row, delete-account modal, E2EE reset and TOTP-disabled stories.

Issue(s)

Part of the screen layout migration (#43056).

Steps to test or reproduce

  • node scripts/scan-raw-layout.mjs --max 1113
  • Account › Profile: set a status, then choose "Clear status after" › custom date.
  • Account › Security, Account › Omnichannel.
  • Storybook: views/account/**.

Further comments

The "enter your current E2EE password" link in ChangePassphrase stays a <Box is='a'>. As a plain <a href='#'> with an onClick, it fails jsx-a11y/anchor-is-valid: it acts as a button. That fix will be its own pull request.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • User Interface
    • Updated the layout and spacing of account profile, security, and omnichannel settings pages.
    • Adjusted the arrangement of device details, transcript options, security instructions, and two-factor authentication content. Existing labels and account settings behavior remain unchanged.
    • Refined the presentation of profile forms, security controls, and confirmation dialogs while preserving their existing actions and validation.
    • Improved form-field alignment across profile layouts, including when fields are displayed in a column.