[IAmJSD]

The ladder config dialog's Ramp Schedule (JSON) field was four rows tall, so a pretty-printed schedule showed only its first step, and invalid JSON was reported only by a toast in the corner ("Ramp schedule is not valid JSON.") with nothing at the field and no hint of where the error was. This PR makes the field taller, turns spellcheck off for it, and also shows the parser's message under the field, marked invalid, with focus moved there. It is a small follow-up from the audit; the visual step editor is #1605.

Part of the UI modernization sweep.

What changed

• frontend/src/ladder-config-modal.ts: the textarea is rows="8" (was 4) with spellcheck="false".
• frontend/src/styles/ladder-form.css: its minimum height is 10rem (was 6rem), with a 1.45 line height.
• frontend/src/ladder.ts (saveLadderConfig): when JSON.parse fails, the existing toast still shows, and the field also gets showFieldError(field, "Not valid JSON: <parser message>") from lib/field-errors.ts (the shared helper: a .field-error note after the field, aria-invalid="true", the note's id added to aria-describedby, cleared on the next edit). Focus moves to the field. Nothing is saved, as before.

Why

The parser message gives a position ("at position 62 (line 2 column 20)"), which is what someone needs to fix a hand-edited schedule; the toast alone said only that something was wrong and disappeared. Putting the message on the field also makes it available to screen readers through aria-describedby.

Screenshots

Before = main at 43dd618, after = this branch. Headless Chromium at 1440x900 against a mocked API, Admin > Purchasing, ladder config Edit for the first account. The invalid-JSON pair was taken at 1440x1200 with a one-off script that types a schedule with a missing comma and presses Save Config (the shared tour does not reach that state); it uses the same mocked API.

Before	After
Four rows: the saved schedule shows only part of its first step.	Eight rows: the first step and most of the second.
Invalid JSON after Save Config: nothing at the field (only a toast elsewhere on screen).	Red outline and "Not valid JSON: Expected ',' or '}' after property value in JSON at position 62 (line 2 column 20)" under the field; the toast still shows.

Verification

Run on this branch's head cb79608d, from frontend/:

• npm run typecheck: pass. npm run lint: 0 errors (141 warnings).
• Jest: 175 suites; 4595 passed, 1 skipped (4596 total).
• npm run build: pass.
• Playwright (e2e-local.sh): 276 passed.

Notes for review

• No test changed or added. A jest case for the inline error (invalid JSON → aria-invalid and the note, no save call) would be cheap to add if wanted.
• The commit message says a two-step schedule fits without scrolling; that holds for a compact two-step schedule. A pretty-printed schedule, like the mock's, takes 12 or more lines and still scrolls, as the screenshot shows.
• The parser message wording comes from the browser's JSON.parse and differs between browsers.

Overlaps

• frontend/src/styles/ladder-form.css: ui(dialogs): one dialog chrome with a header close button #1598 (removes the dialog's private chrome block) and ui(settings): laddering and planned purchases section spacing #1607; both merge cleanly with this one.
• frontend/src/ladder.ts: ui(settings): laddering and planned purchases section spacing #1607.

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 59 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: a2fa1c26-4af6-45bd-8cc8-52dbef47846d

Commits

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

Files selected for processing: 3

• frontend/src/ladder-config-modal.ts
• frontend/src/ladder.ts
• frontend/src/styles/ladder-form.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.}

[IAmJSD]

Replaced by #1623: the same branch and commits, reopened from LeanerCloud/cloud-commitments-platform so it can be part of a native GitHub stack (cross-fork stacks aren't supported). Please review there.