fix: notification matrix

components/notifications/notification-matrix.tsx

@@ -53,11 +53,11 @@ const EVENTS: {
   {
     key: "messages",
     label: "Messages",
-    description: "New direct messages and group chats.",
-    // Push only. In-app delivery for chat is the inbox itself — a message
-    // highlights its row rather than entering the notification tray — and
-    // there is no such thing as an emailed chat message.
-    channels: ["push"],
+    description:
+      "New messages. Email is only ever sent when someone starts a conversation with you.",
+    // No in-app: chat's in-app delivery is the inbox itself, where a message
+    // highlights its row rather than entering the notification tray.
+    channels: ["email", "push"],
   },
   {
     key: "community",
@@ -139,7 +139,11 @@ export function NotificationMatrix() {
   }
 
   return (
-    <div className="grid grid-cols-[1fr_auto_auto_auto] items-center gap-x-4 gap-y-0 sm:gap-x-6">
+    // Fixed, EQUAL channel columns. With `auto` each one sized to its own
+    // widest content — "In-app" against the 44px toggle, "Push" against the
+    // same toggle — so the three columns came out different widths and
+    // neither the headers nor the switches lined up down the grid.
+    <div className="grid grid-cols-[1fr_repeat(3,3.25rem)] items-center gap-x-2 gap-y-0 sm:grid-cols-[1fr_repeat(3,4rem)] sm:gap-x-4">
       {/* Header row */}
       <span aria-hidden />
       {CHANNELS.map((c) => (