[IAmJSD]

A set of small fixes on Admin > Accounts & onboarding. The federation IaC download buttons had 11.5px descriptions at 72% opacity. The Target cloud pills stacked into a column on phones. The Service Override Backup import used the browser's raw file input inside a pill-shaped border. The "CUDly host account" banner in an empty provider block had its Add button butting against the text. This PR makes the download options readable cards, turns Target cloud into one segmented control, styles the file picker as a button, and tidies the registration filter, status cell and empty state.

Part of the UI modernization sweep.

What changed

• frontend/src/styles/settings.css:
  • Federation setup: the download buttons are cards in an auto-fill grid, each with an icon tile, a 14px semibold name and a muted one-line description at full opacity. Target cloud is a single segmented control (inline-flex, nowrap) using colour tokens instead of hardcoded hex values, and it stays on one line on phones.
  • Registrations: the Status filter label sits on the select's line at the body size, and the status cell (.registration-status) doesn't wrap "Pending" and "creds" onto two lines.
  • Service Override Backup: the file input drops the pill border, and its ::file-selector-button is styled as an outline button. The Import file and Mode labels line up with their controls. The empty import status and report slots no longer pad the bottom of the card; the status is a live region, so only its margin goes.
  • Empty state: the "CUDly host account" banner lays out its text and Add button on one tinted line, and "No accounts configured." is plain muted text instead of italic (second commit).
• frontend/src/modules/registrations.ts: the status cell gets the registration-status class.
• The rules for registrations, override import and the empty state sit after the federation/accounts rules instead of at the end of the file, so they don't conflict with the other admin PRs (third commit; no style change).

Why

These are the leftover rough spots on the page from the audit: text too faint to read, a control that broke into a column on phones, an unstyled native file input, and spacing glitches in the empty state.

Screenshots

Before = main at 43dd618; after = this branch. Headless Chromium at 1440x900 (desktop) and 390x844 (phone) against a mocked API. The empty state uses the tour's "no accounts" mock.

Before	After
Federation setup: separate light pills and wide buttons with faint 11.5px descriptions.	A segmented Target cloud control and cards with an icon tile, a readable name and a muted description.
Phone: the Target cloud pills stack into a column next to a wrapped label.	Phone: one segmented control on one line under its label.
Service Override Backup: the native file input inside a pill border, and the labels sit higher than their controls.	"Choose File" is an outline button; the labels line up with their controls, and the card has no extra bottom padding.
Empty AWS block: the host-account banner with its Add button against the text; italic empty text.	The banner is one tinted line with Add on the right; plain muted empty text.

Verification

Run on this branch's head f1a306a9 (main 43dd618 + 3 commits), from frontend/:

• npm run typecheck: pass. npm run lint: 0 errors (141 warnings, the same as main). npm run build: pass.
• Jest: 175 suites; 4595 passed, 1 skipped. No tests changed.
• Playwright (e2e-local.sh, the repo's full suite): 276 passed.

Notes for review

• The federation cards use an auto-fill grid with a 15rem minimum, so at 1440px the three cards leave the fourth column empty instead of stretching full width. A fixed three-column grid would fill the row; I kept the grid so the cards don't become very wide on large screens.
• The section headings on this page keep main's blue legend here; the in-card headings come with ui(settings): admin settings sections as cards with visible hints #1606. The row action buttons in these screenshots are unchanged; the icon versions are ui(accounts): account and registration row actions as icon buttons #1608.

Overlaps

• frontend/src/modules/registrations.ts is also touched by ui(accounts): account and registration row actions as icon buttons #1608. They merge cleanly.
• frontend/src/styles/settings.css is also touched by ui(settings): admin settings sections as cards with visible hints #1606, ui(accounts): account and registration row actions as icon buttons #1608, ui(settings): quiet danger style for Reset to Defaults #1609 and fix(users): permission overview shows admin:* grants and verb variants #1610. All pairs merge cleanly in any order.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for these PRs; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 26 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: LeanerCloud/cloud-commitments-platform
• Branch: main
• File: .coderabbit.yaml
• Commit: 43dd618
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 4fe5c681-1e28-48da-8b64-cb8f6ac0fd4a

Commits

Reviewing files that changed from the base of the PR and between 43dd618 and f1a306a.

Files selected for processing: 2

• frontend/src/modules/registrations.ts
• frontend/src/styles/settings.css

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cristim]

Merge gate record (burndown orchestrator)

Independent adversarial review (claude-opus-5-5)
#1611 @ f1a306a: NO CONFIRMED FINDINGS

• Shared CSS: .target-cloud-pills is also used by the Duplicate Group modal (index.html:1244, 4 pills); the new nowrap segmented control fits at 390px and that modal is restyled the same way without breaking.
• Focus: the file input loses its border, but the .controls-bar > input:focus-visible ring (forms.css:99) still applies; pills and download cards keep the base :focus-visible outline (base.css:182).
• States: selected-plus-hover ordering is correct. The download grid (minmax 15rem) fits 390px. The self-account banner's flex children are a span and a button, so no text is split.
• The import status live region stays rendered; only its margin collapses. No tests added, so no mutation probe.

Local verification
Local verification on macOS @ f1a306a: PASS

• Same real local stack as above.
• npm test exit 1: 4591 passed / 4 failed / 1 skipped; 2 are the pre-existing savings-history DST tests, 2 are settings.test.ts timeouts under full-suite load (that file passes alone with --runInBand, 127/127; labelled load flake). lint exit 0, build exit 0.
• Driven: Accounts page (federation cards, all 3 target-cloud pills, format-button hover, Service Override Backup file picker idle/hover/file chosen, registrations, per-provider tables) and the Duplicate Group modal pills selected and hovered, at 1440x900 and 390x844 (about 36 screenshots).
• No console errors on desktop; shared phone 401s as above.

Screenshots (1440x900 and 390x844) are kept with the local run evidence; not attached here.
CodeRabbit not run: the exact-SHA local verification and the Opus review above cover this SHA (repo CLAUDE.md review gate).