fix: improve toast and dialog interations

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