fix(webapp): keep select dropdowns usable inside dialogs

webapp/src/components/delegation/create-delegation-dialog.tsx

@@ -195,7 +195,7 @@ export function CreateDelegationDialog({ tokenMint, disabled }: CreateDelegation
         (selectedKind === 'fixed' || (periodDays.length > 0 && Number(periodDays) > 0));
 
     return (
-        <Dialog open={open} onOpenChange={handleOpenChange}>
+        <Dialog open={open} onOpenChange={handleOpenChange} modal={false}>
             <DialogTrigger asChild>
                 <SolanaButton
                     disabled={disabled || authorityInitId == null}

webapp/src/components/plan/create-plan-dialog.tsx

@@ -246,7 +246,7 @@ export function CreatePlanDialog({ open, onOpenChange }: CreatePlanDialogProps)
     );
 
     return (
-        <Dialog open={open} onOpenChange={handleOpenChange}>
+        <Dialog open={open} onOpenChange={handleOpenChange} modal={false}>
             <DialogContent className="sm:max-w-[750px]">
                 <DialogHeader>
                     <DialogTitle>Create Subscription Plan</DialogTitle>

webapp/src/components/plan/plan-card.tsx

@@ -153,7 +153,7 @@ function EditPlanDialog({
         (endTsComputed === 0 || blockTime !== undefined);
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
+        <Dialog open={open} onOpenChange={onOpenChange} modal={false}>
             <DialogContent className="sm:max-w-[750px]">
                 <DialogHeader>
                     <DialogTitle>Edit Plan: {meta.n || 'Unnamed'}</DialogTitle>

webapp/src/components/time-travel/time-travel-button.tsx

@@ -147,7 +147,7 @@ function TimeTravelButtonInner() {
     };
 
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog open={open} onOpenChange={setOpen} modal={false}>
             <DialogTrigger asChild>
                 <Button
                     variant="outline"

webapp/src/components/ui/dialog.tsx

@@ -33,7 +33,12 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
     );
 }
 
-function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
+function DialogContent({
+    className,
+    children,
+    onInteractOutside,
+    ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
     return (
         <DialogPortal data-slot="dialog-portal">
             <DialogOverlay />
@@ -43,6 +48,14 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
                     'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
                     className,
                 )}
+                onInteractOutside={event => {
+                    const target = event.detail.originalEvent.target as HTMLElement | null;
+                    if (target?.closest('[role="listbox"], [role="option"]')) {
+                        event.preventDefault();
+                        return;
+                    }
+                    onInteractOutside?.(event);
+                }}
                 {...props}
             >
                 {children}

webapp/src/index.css

@@ -315,3 +315,7 @@ pre code {
         animation: none;
     }
 }
+
+[role='listbox'] {
+    pointer-events: auto;
+}