fix(ui): manually implement close-on-outside-click feature for modals

1. use `pointer-events-auto` to allow backdrop layer to receive event
2. bind a onclick to the backdrop layer

src/components/ui/Modal.tsx

@@ -41,7 +41,7 @@ export default (props: Props) => {
       <Show when={api().isOpen}>
         <div class="fixed inset-0 z-20 fcc">
           <Portal>
-            <div {...api().backdropProps} class="fixed inset-0 bg-base opacity-60" />
+            <div {...api().backdropProps} class="fixed inset-0 bg-base opacity-60 pointer-events-auto" onclick={() => api().close()} />
           </Portal>
           <div {...api().containerProps}>
             <div {...api().contentProps} class={`bg-base-100 transition-transform ease-out max-w-screen max-h-screen overflow-auto border-base shadow-lg ${containerBaseClass}`}>