[Badri-Rajendran]

Problem

Placing an order (security VTI, side Buy, quantity 2, reference price 20) failed with a generic
"some error occurred," and the order form's four fields were stacked in a narrow column not using
the available page width.

Diagnosis (verified live, not guessed)

The wire path is correct. Registered a fresh customer, approved KYC/account, funded and
confirmed $1,000 cash through the real DepositService, then posted the exact frontend payload
(security_id UUID, side: "buy", quantity: "2", reference_price: "20") directly to
POST /api/v1/orders — 201, order created. Payload construction, CreateOrderRequest's
schema, and the Units/Price decimal-string convention all match exactly.

Root cause: every order-specific rejection reason was thrown away.
frontend/src/utils/apiErrorMessage.js's code map has zero entries for any code
orders.py actually returns (insufficient_investable_cash, kyc_verification_pending,
kyc_verification_rejected, account_approval_pending, account_approval_rejected,
customer_not_eligible) — all of them fall through to the generic
"Something went wrong. Please try again." I reproduced this live against an
approved-but-unfunded account (a KYC-pending account can't even reach this page — RequireOnboarded
redirects to /onboarding first, confirmed): before the fix, the form showed the generic message;
after, it shows "You don't have enough investable cash for this order."

Fix

• New frontend/src/features/orders/ordersErrorMessage.js, mirroring the existing
  fundingErrorMessage.js pattern, mapping all six real order-rejection codes to specific,
  actionable copy. Wired into OrderForm, OrderList, and ApprovalBanner (all three previously
  called the bare utility).
• Input-field corrections found while reading every field carefully: validation/server errors now
  wired into Input's error prop (fixes a real accessibility gap — aria-invalid/
  aria-describedby never fired before); reference price is now trimmed before validating/sending
  (quantity already was, via parseQuantity); an explicit empty-state message replaces a silent
  undefined selection if the securities list is ever empty; required added to both selects for
  parity with the inputs.
• Layout: OrderForm.css hard-coded max-width: 360px with no breakpoint and no Card wrapper —
  replaced with a responsive 2-column field grid (Security+Side, Quantity+Reference price) at
  768px+, matching this codebase's established FeesPage.css/FundingPage.css breakpoint
  convention, collapsing to one column below it, wrapped in a Card at the page's
  --reading-max-width (640px).

No backend changes — the wire contract was already correct.

Validation evidence

• npm run lint, npm run build — both clean.
• Live verification: restarted the frontend on this branch, reproduced the exact failing scenario
  against an approved-but-unfunded test account — confirmed the specific message now renders.
• Screenshots taken at 1280px (2-column grid, Card-wrapped) and 375px (clean single-column stack,
  no overflow) confirming the layout fix at both breakpoints.

Security / DB / API impact

None. Frontend-only change; no new endpoint, no wire-shape change, no migration.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.