---
description: Bootstrap modal backdrop — avoid blocking forms
globs:
alwaysApply: true
---

## Bootstrap 5 modals (Family Hub)

The default modal **backdrop** has repeatedly caused **stacking / pointer-event problems** where the dimmed overlay sits above the dialog and **blocks clicks and focus** on fields inside the modal.

**For modals that contain forms or other interactive controls:**

1. On the root `.modal` element, set **`data-bs-backdrop="false"`**.
2. When constructing the instance in JavaScript, pass **`{ backdrop: false }`** to `new bootstrap.Modal(element, …)` so behavior stays correct even if markup changes.

Users can still close the dialog with **Close**, **Cancel**, or other explicit dismiss controls.

**Existing examples in this repo:** `tabs/meals.php` (`mealSlotModal`, `mealImportModal`); `assets/js/main.js` (`mealSlotModal` uses `{ backdrop: false }`).

Do **not** rely on the default backdrop for interactive modals unless you have verified it does not intercept input on the target devices/browsers.

**Ancestors with `transform`:** Any non-`none` `transform` on a parent (e.g. `.card:hover { transform: translateY(...) }`) creates a **containing block** for `position: fixed`, so Bootstrap modals inside that subtree render relative to the transformed ancestor and appear clipped. Family Hub card hover lift uses **box-shadow only** (no translate) for this reason; do not reintroduce transform-based card hover without moving modals to `document.body` or an untransformed shell.