Audit: modal backdrop blur levels are inconsistent

[zindello]

Background

The project has two modal backdrop utility classes defined in `src/assets/main.css`:

• `modal-backdrop` — standard backdrop, `backdrop-blur-lg`
• `modal-backdrop-heavy` — destructive-action backdrop, `bg-black/80` (heavier opacity, same or similar blur)

Modals that use these classes get consistent blur automatically. However, several modals in the codebase use bespoke inline backdrop markup instead of the utility classes, and the blur values vary (`backdrop-blur-sm`, `backdrop-blur-xl`, `backdrop-blur-lg`, raw `backdrop-filter: blur(20px)`, etc.). This creates visual inconsistency — some modals feel "heavier" or "lighter" than others for no intentional reason.

Audit scope

Every `.vue` file in `src/` that renders a modal or overlay with a blurred backdrop.

---

AI prompt — feed this into Claude Code to run the audit

```
Read docs/ui-components.md and src/assets/main.css first. Note the blur value used in modal-backdrop and modal-backdrop-heavy.

For every .vue file in src/, find elements that apply backdrop blur in a modal or overlay context. Look for:

• backdrop-blur-* Tailwind classes on fixed/absolute overlay elements
• backdrop-filter in scoped or inline CSS on overlay elements
• The backdrop div inside modals that use bespoke markup instead of modal-backdrop

For each occurrence, report:

• File path and line number
• The element and its current blur value
• Whether it uses modal-backdrop / modal-backdrop-heavy (correct) or bespoke markup (potential violation)
• Whether the blur level matches the standard backdrop-blur-lg used in modal-backdrop

Do NOT fix anything yet — output a structured report only. Wait for approval before making changes.

Format:

Backdrop blur audit

src/path/to/Component.vue

• Line N: <div class="fixed inset-0 backdrop-blur-sm ..."> — bespoke backdrop, blur is backdrop-blur-sm. Should be modal-backdrop (backdrop-blur-lg).
• Line N: uses modal-backdrop ✓

Summary

• N modals use modal-backdrop correctly
• N modals use modal-backdrop-heavy correctly
• N modals have bespoke backdrops with non-standard blur values
• Recommended standard blur:
  ```

---

Acceptance criteria

• All standard (non-destructive) modal backdrops use `modal-backdrop` or match its blur value exactly
• All destructive modal backdrops use `modal-backdrop-heavy` or match its blur value exactly
• No bespoke backdrop markup uses a different blur level than the standard without documented intent
• If any blur variation is intentional (e.g. a glass-surface result modal), it is documented in `docs/ui-components.md`
• `npm run test:unit` passes after any fixes

Related

• `docs/ui-components.md` — modal backdrop class documentation
• `src/assets/main.css` — `modal-backdrop` and `modal-backdrop-heavy` definitions
• Issue Audit: z-index violations and missing Teleport throughout the UI #57 — z-index / Teleport audit (related: both are about modal consistency)