fix(web): stop modals closing on backdrop click

[claude]

Requested by Jake Hulberg · Slack thread

Summary

Clicking the dimmed backdrop outside a modal was closing it, discarding any in-progress work. This makes backdrop-dismiss off by default for every modal in the app, broadening the earlier credential-only fix per reviewer request.

Before: clicking the dimmed backdrop outside ANY modal closed it, discarding in-progress work (credential setup, service setup, etc.).

After: an outside/backdrop click no longer closes any modal. Modals close via the X button, Cancel, or Escape. This applies app-wide.

How: flipped the shared web/src/components/Modal.tsx dismissOnBackdrop default to false (the opt-in prop is retained for any modal that wants backdrop-dismiss back). The always-rendered header X button plus per-modal Cancel/Escape guarantee every modal stays closeable. Dropdown menus are unaffected — they use a separate pattern and intentionally keep outside-click-to-close.

Type of change

• Bug fix
• New feature
• Refactor / cleanup
• Documentation
• CI / build

Test plan

• Existing tests pass (make test) — not run; change is frontend-only
• Added/updated tests for new behavior
• Manual testing (describe below)

Frontend build verified with npm ci && npm run build (tsc && vite build) — compiles cleanly. Manual check: clicking the backdrop no longer closes any modal; the X, Cancel, and Escape still close them.

Security checklist

• No secrets or credentials in code
• No new unauthenticated endpoints
• Input validation on new API surfaces
• Checked for OWASP top 10 (injection, XSS, etc.)

---

Generated by Claude Code

[greptile-apps]

Greptile Summary

This PR changes the shared Modal component so backdrop (outside-area) clicks no longer close modals by default, preventing accidental data loss when forms or multi-step flows are open. The Escape key and the always-visible X button remain valid close mechanisms.

• dismissOnBackdrop prop is added with a default of false; the outer wrapper's onClick is now onClose only when the prop is true, preserving opt-in backdrop dismissal for any modal that wants it.
• The existing e.stopPropagation() on the card div correctly guards against click-through in the opt-in case; no regression is introduced.
• All callers silently gain the new default — no call-site changes are needed, and no modal loses its X-button close path.

Confidence Score: 5/5

Safe to merge — single-line default change in a shared presentational component with no data or auth logic involved.

The change is a one-prop addition with a changed default on a purely visual component. The existing stopPropagation guard on the card keeps opt-in backdrop dismissal correct, Escape-key close is preserved as documented, and no call sites need updating. No logic, data, or security paths are touched.

No files require special attention.

Important Files Changed

Filename	Overview
web/src/components/Modal.tsx	Adds opt-in dismissOnBackdrop prop (default false), changing the outer wrapper's onClick from always-onClose to conditionally undefined. The existing stopPropagation on the card keeps the opt-in path safe; Escape-key close is intentionally preserved.

_{Reviews (1): Last reviewed commit: "fix(web): disable backdrop-click dismiss..." | Re-trigger Greptile}