fix: improve toast and dialog interations

src/app/page.tsx

@@ -48,6 +48,7 @@ export default function Home() {
     useState<BrowserProfile | null>(null);
   const [currentProfileForVersionChange, setCurrentProfileForVersionChange] =
     useState<BrowserProfile | null>(null);
+  const [hasCheckedStartupPrompt, setHasCheckedStartupPrompt] = useState(false);
 
   // Simple profiles loader without updates check (for use as callback)
   const loadProfiles = useCallback(async () => {
@@ -110,6 +111,9 @@ export default function Home() {
   }, [loadProfilesWithUpdateCheck, checkForUpdates]);
 
   const checkStartupPrompt = async () => {
+    // Only check once during app startup to prevent reopening after dismissing notifications
+    if (hasCheckedStartupPrompt) return;
+
     try {
       const shouldShow = await invoke<boolean>(
         "should_show_settings_on_startup",
@@ -117,8 +121,10 @@ export default function Home() {
       if (shouldShow) {
         setSettingsDialogOpen(true);
       }
+      setHasCheckedStartupPrompt(true);
     } catch (error) {
       console.error("Failed to check startup prompt:", error);
+      setHasCheckedStartupPrompt(true);
     }
   };
 

src/components/settings-dialog.tsx

@@ -139,7 +139,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
 
-        <div className="grid gap-6 py-4 overflow-y-auto flex-1 min-h-0">
+        <div className="grid overflow-y-auto flex-1 gap-6 py-4 min-h-0">
           {/* Appearance Section */}
           <div className="space-y-4">
             <Label className="text-base font-medium">Appearance</Label>
@@ -172,7 +172,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
 
           {/* Default Browser Section */}
           <div className="space-y-4">
-            <div className="flex items-center justify-between">
+            <div className="flex justify-between items-center">
               <Label className="text-base font-medium">Default Browser</Label>
               <Badge variant={isDefaultBrowser ? "default" : "secondary"}>
                 {isDefaultBrowser ? "Active" : "Inactive"}

src/components/ui/sonner.tsx

@@ -15,8 +15,15 @@ const Toaster = ({ ...props }: ToasterProps) => {
           "--normal-bg": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
+          zIndex: 99999,
         } as React.CSSProperties
       }
+      toastOptions={{
+        style: {
+          zIndex: 99999,
+          pointerEvents: "auto",
+        },
+      }}
       {...props}
     />
   );

src/components/update-notification.tsx

@@ -47,17 +47,17 @@ export function UpdateNotificationComponent({
   };
 
   return (
-    <div className="flex flex-col gap-3 p-4 max-w-md bg-background border border-border rounded-lg shadow-lg">
-      <div className="flex items-start justify-between gap-2">
+    <div className="flex flex-col gap-3 p-4 max-w-md rounded-lg border shadow-lg bg-background border-border">
+      <div className="flex gap-2 justify-between items-start">
         <div className="flex flex-col gap-1">
-          <div className="flex items-center gap-2">
+          <div className="flex gap-2 items-center">
             <span className="font-semibold text-foreground">
               {browserDisplayName} Update Available
             </span>
             <Badge
               variant={notification.is_stable_update ? "default" : "secondary"}
             >
-              {notification.is_stable_update ? "Stable" : "Beta"}
+              {notification.is_stable_update ? "Stable" : "Nightly"}
             </Badge>
           </div>
           <div className="text-sm text-muted-foreground">
@@ -71,20 +71,20 @@ export function UpdateNotificationComponent({
           onClick={async () => {
             await onDismiss(notification.id);
           }}
-          className="h-6 w-6 p-0 shrink-0"
+          className="p-0 w-6 h-6 shrink-0"
         >
-          <FaTimes className="h-3 w-3" />
+          <FaTimes className="w-3 h-3" />
         </Button>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="flex gap-2 items-center">
         <Button
           onClick={handleUpdateClick}
           disabled={isUpdating}
           size="sm"
-          className="flex items-center gap-2"
+          className="flex gap-2 items-center"
         >
-          <FaDownload className="h-3 w-3" />
+          <FaDownload className="w-3 h-3" />
           Update
         </Button>
         <Button

src/hooks/use-app-update-notifications.tsx

@@ -135,6 +135,10 @@ export function useAppUpdateNotifications() {
         id: "app-update",
         duration: Number.POSITIVE_INFINITY, // Persistent until user action
         position: "top-left",
+        style: {
+          zIndex: 99999, // Ensure app updates appear above dialogs
+          pointerEvents: "auto", // Ensure app updates remain interactive
+        },
       },
     );
   }, [

src/hooks/use-update-notifications.tsx

@@ -232,8 +232,10 @@ export function useUpdateNotifications(
           id: notification.id,
           duration: Number.POSITIVE_INFINITY, // Persistent until user action
           position: "top-right",
-          // Remove transparent styling to fix background issue
-          style: undefined,
+          style: {
+            zIndex: 99999, // Ensure notifications appear above dialogs
+            pointerEvents: "auto", // Ensure notifications remain interactive
+          },
         },
       );
     }

src/lib/toast-utils.ts

@@ -116,6 +116,8 @@ export function showToast(props: ToastProps & { id?: string }) {
         border: "none",
         boxShadow: "none",
         padding: 0,
+        zIndex: 99999,
+        pointerEvents: "auto",
       },
     });
   } else if (props.type === "error") {
@@ -127,6 +129,8 @@ export function showToast(props: ToastProps & { id?: string }) {
         border: "none",
         boxShadow: "none",
         padding: 0,
+        zIndex: 99999,
+        pointerEvents: "auto",
       },
     });
   } else {
@@ -138,6 +142,8 @@ export function showToast(props: ToastProps & { id?: string }) {
         border: "none",
         boxShadow: "none",
         padding: 0,
+        zIndex: 99999,
+        pointerEvents: "auto",
       },
     });
   }

src/styles/globals.css

@@ -123,3 +123,23 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Ensure Sonner toasts appear above all dialogs and remain interactive */
+.toaster,
+[data-sonner-toaster] {
+  z-index: 99999 !important;
+  pointer-events: auto !important;
+}
+
+[data-sonner-toast] {
+  z-index: 99999 !important;
+  pointer-events: auto !important;
+}
+
+/* Ensure toast buttons and interactive elements work */
+[data-sonner-toast] button,
+[data-sonner-toast] [role="button"],
+[data-sonner-toast] input,
+[data-sonner-toast] select {
+  pointer-events: auto !important;
+}