Read-only form fields: signal non-editability without fading content (muted bg + lock, not opacity)

[JohnRDOrazio]

Problem

When the upstream/remote-sync repo fields are webhook-driven, they're made read-only by fading the content — isWebhookDriven && "cursor-not-allowed opacity-60" on the four <input>s in RemoteSyncSection (app/projects/[id]/settings/page.tsx, ~L2889–2970). PR #148 proposed extending the same opacity-60 to the field labels for consistency; that was declined because it drops the labels below WCAG AA (see below), which surfaced the underlying issue: fading is the wrong signal for these fields.

These are read-only but informational fields — they show the real owner / name / branch / path pulled from the GitHub integration, values the user is meant to read and confirm, not empty disabled inputs. Fading the content pushes "please read this" toward "ignore me."

Contrast data (why dimming text is a problem)

Labels are text-slate-700 (#334155), text-sm / font-medium → normal text, so 4.5:1 AA applies:

State	Effective on white	Contrast	AA
Full opacity	#334155	~9.3:1	✅
opacity-60	≈#858d99	~3.35:1	❌

The same logic applies to fading the values in the inputs (the current behavior), just less visibly.

Proposed treatment

Signal non-editability through affordance, not opacity — keep label and value at full contrast:

• Keep readOnly + cursor-not-allowed (already there).
• Use a muted background to distinguish read-only (e.g. bg-slate-50 dark:bg-slate-800/50) instead of opacity-60.
• Drop the focus ring / focus border on read-only inputs (no editable affordance).
• Optional: a small lock icon in the field (or by the group caption).
• Keep the existing explanatory note "Repository fields are managed by the GitHub integration." (PR fix: dim labels and reposition note for webhook-driven readonly fields #148 also repositions it below the group — a good change to keep).

Scope

• RemoteSyncSection in app/projects/[id]/settings/page.tsx — the four webhook-driven repo inputs (and their labels).
• This supersedes the label-opacity-60 change that fix: dim labels and reposition note for webhook-driven readonly fields #148 is dropping, and also revisits the pre-existing input opacity-60.
• If the pattern is worth reusing, consider extracting a small readOnly-aware input style helper so future read-only fields get consistent treatment.

Context

Follow-up from PR #148 review and the #5 verification. Refs #5, #148.