From 91e987bcda146320a3ffab61f80e8e99e7bf7ab7 Mon Sep 17 00:00:00 2001
From: Quick <31828688+Quick104@users.noreply.github.com>
Date: Fri, 12 Jun 2026 09:54:56 -0400
Subject: [PATCH] fix(web): add padding and hierarchy to notification
 preferences popover

The shared PopoverContent primitive ships with p-0, but the preferences
popover never added its own padding, leaving toggle rows flush against
the border. Add p-4, separate the master switch from category toggles
with a divider, and dim dependent rows while the master switch is off.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/pages/Notifications.tsx | 34 ++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/Notifications.tsx b/web/src/pages/Notifications.tsx
index efc95b4d..be2cf642 100644
--- a/web/src/pages/Notifications.tsx
+++ b/web/src/pages/Notifications.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import { Link } from "react-router";
 import { Bell, BellOff, Check, CheckCheck, Loader2, Settings2 } from "lucide-react";
 import type { AppNotification } from "@/api/types";
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
 import {
   formatEpisodeCode,
   useMarkAllNotificationsRead,
@@ -251,7 +252,7 @@ function NotificationPreferencesPopover() {
           Preferences
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="end" className="w-80">
+      <PopoverContent align="end" className="w-80 p-4">
         {isLoading ? (
           <div className="space-y-3">
             <Skeleton className="h-6 w-full" />
@@ -266,19 +267,26 @@ function NotificationPreferencesPopover() {
             </Button>
           </div>
         ) : (
-          <div className="space-y-4">
+          <div className="space-y-3.5">
             {toggles.map((toggle, index) => (
-              <div key={toggle.key} className="flex items-center justify-between gap-3">
-                <div className="min-w-0">
-                  <div className="text-sm font-medium">{toggle.label}</div>
-                  <div className="text-muted-foreground text-xs">{toggle.description}</div>
+              <Fragment key={toggle.key}>
+                {index === 1 && <Separator />}
+                <div
+                  className={`flex items-center justify-between gap-3 transition-opacity ${
+                    index > 0 && !prefs.enabled ? "opacity-50" : ""
+                  }`}
+                >
+                  <div className="min-w-0">
+                    <div className="text-sm font-medium">{toggle.label}</div>
+                    <div className="text-muted-foreground text-xs">{toggle.description}</div>
+                  </div>
+                  <Switch
+                    checked={prefs[toggle.key]}
+                    disabled={index > 0 && !prefs.enabled}
+                    onCheckedChange={(checked) => updatePrefs.mutate({ [toggle.key]: checked })}
+                  />
                 </div>
-                <Switch
-                  checked={prefs[toggle.key]}
-                  disabled={index > 0 && !prefs.enabled}
-                  onCheckedChange={(checked) => updatePrefs.mutate({ [toggle.key]: checked })}
-                />
-              </div>
+              </Fragment>
             ))}
           </div>
         )}