Dialog: clicking the panel's inner padding closes it (backdropClick matches the <dialog> itself) #570

Bug

Dialog closes when the user clicks the empty padding inside the panel, not only the backdrop.

DialogContent renders a native <dialog> with p-6 and gap-4, and dialog_controller.js dismisses on any click whose target is the <dialog> itself:

backdropClick(e) {
  if (e.target === this.dialogTarget) {
    this.dismiss()
  }
}

A click on the ::backdrop and a click on the panel's own padding (or the gaps between children) both report e.target === dialog, so both close the dialog.

Reproduce

1. Open any Dialog (e.g. one with a form inside).
2. Click inside the panel, in the padding area or between two fields — not on a child element.
3. The dialog closes.

Seen on main (b96aaf3); #517 keeps backdropClick as is.

Suggested fix

Only dismiss when the pointer is outside the panel's rectangle:

backdropClick(e) {
  if (e.target !== this.dialogTarget) return

  const rect = this.dialogTarget.getBoundingClientRect()
  const outside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom
  if (outside) this.dismiss()
}

(Keyboard-triggered clicks report clientX/clientY of 0, which falls outside the rect only when the dialog isn't at the top-left corner — worth guarding with e.detail === 0 if that matters.)