Allow dismissing dialogs by clicking backdrop (#2497)

Closes #2496

Radix is supposed to handle this behaviour for us. Something we are
doing related to dom structure or css is preventing that from happening,
but I spent a while debugging and didn't get to the bottom of it. For
now let's just implement it ourselves and we can revisit making radix
behave properly later?

### Change Type

- [x] `patch` — Bug fix

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version


### Release Notes

- Allows dismissing dialogs by clicking the backdrop.

packages/tldraw/src/lib/ui/components/Dialogs.tsx

@@ -27,7 +27,14 @@ const Dialog = ({ id, component: ModalContent, onClose }: TLUiDialog) => {
 	return (
 		<_Dialog.Root onOpenChange={handleOpenChange} defaultOpen>
 			<_Dialog.Portal container={container}>
-				<_Dialog.Overlay dir="ltr" className="tlui-dialog__overlay">
+				<_Dialog.Overlay
+					dir="ltr"
+					className="tlui-dialog__overlay"
+					onClick={(e) => {
+						// only close if the click is on the overlay itself, ignore bubbling clicks
+						if (e.target === e.currentTarget) handleOpenChange(false)
+					}}
+				>
 					<_Dialog.Content dir="ltr" className="tlui-dialog__content">
 						<ModalContent onClose={() => handleOpenChange(false)} />
 					</_Dialog.Content>