From a7fc464dc55252d70cb9242850e9b4a5b771ce52 Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Wed, 16 Sep 2026 00:33:08 -0400
Subject: [PATCH 1/7] Fix incoming mail links and add richer compose formatting
 + attachment previews

- Links in message bodies were completely inert (iframe sandbox blocked
  even opening a new tab); now sandboxed but allow-popups.
- Fix the gap between a reply and the quoted message it's replying to.
- Compose editor: fuller toolbar (strikethrough, lists, quote, clear
  formatting), active-state highlighting, Shift+Enter for a soft line
  break.
- Attachments (images, PDF, audio, video, text/JSON/CSV) preview inline
  instead of forcing a download.
---
 app/admin/mail/attachment-preview.tsx    | 242 +++++++++++++++++++++++
 app/admin/mail/editor.tsx                | 154 ++++++++++++---
 app/admin/mail/html.ts                   |   1 +
 app/admin/mail/message-view.tsx          |  83 +++++---
 app/api/mail/messages/[id]/body/route.ts |   3 +
 5 files changed, 425 insertions(+), 58 deletions(-)
 create mode 100644 app/admin/mail/attachment-preview.tsx

diff --git a/app/admin/mail/attachment-preview.tsx b/app/admin/mail/attachment-preview.tsx
new file mode 100644
index 00000000..eea0be05
--- /dev/null
+++ b/app/admin/mail/attachment-preview.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
+import type { BodyPart } from "@/lib/mail/jmap-mail";
+import { withAs } from "./inbox-picker";
+
+export type PreviewKind = "image" | "pdf" | "text" | "audio" | "video";
+
+const TEXT_PREVIEW = /^text\/(plain|csv|markdown)$|^application\/json$/i;
+const TEXT_PREVIEW_MAX_BYTES = 512 * 1024;
+
+/** What kind of inline preview a MIME type supports, or null to fall back
+ *  to a plain download. Nothing here needs the blob route to change: Content-
+ *  Disposition doesn't stop <img>/<video>/<audio> from loading inline, and
+ *  the PDF/text previews fetch the bytes themselves rather than navigating
+ *  the endpoint directly. */
+export const previewKind = (type: string): PreviewKind | null => {
+  const t = type.toLowerCase();
+  if (t.startsWith("image/")) return "image";
+  if (t === "application/pdf") return "pdf";
+  if (t.startsWith("video/")) return "video";
+  if (t.startsWith("audio/")) return "audio";
+  if (TEXT_PREVIEW.test(t)) return "text";
+  return null;
+};
+
+export const size = (bytes: number) =>
+  bytes < 1024
+    ? `${bytes} B`
+    : bytes < 1024 * 1024
+      ? `${Math.round(bytes / 1024)} KB`
+      : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+
+export const blobUrl = (part: BodyPart, viewing: string | null) =>
+  withAs(
+    `/api/mail/blob/${encodeURIComponent(part.blobId!)}?name=${encodeURIComponent(
+      part.name ?? "attachment",
+    )}&type=${encodeURIComponent(part.type)}`,
+    viewing,
+  );
+
+type Loadable<T> =
+  { status: "loading" } | { status: "error" } | ({ status: "ready" } & T);
+
+function TextPreview({ url, bytes }: { url: string; bytes: number }) {
+  const [state, setState] = useState<
+    Loadable<{ text: string }> | { status: "too-large" }
+  >(
+    bytes > TEXT_PREVIEW_MAX_BYTES
+      ? { status: "too-large" }
+      : { status: "loading" },
+  );
+
+  useEffect(() => {
+    if (bytes > TEXT_PREVIEW_MAX_BYTES) return;
+    let live = true;
+    fetch(url)
+      .then((res) => (res.ok ? res.text() : Promise.reject(res.status)))
+      .then((text) => live && setState({ status: "ready", text }))
+      .catch(() => live && setState({ status: "error" }));
+    return () => {
+      live = false;
+    };
+  }, [url, bytes]);
+
+  if (state.status === "too-large")
+    return (
+      <p className="p-6 text-sm text-subtle">
+        This file is too large to preview — download it instead.
+      </p>
+    );
+  if (state.status === "loading")
+    return <p className="p-6 text-sm text-subtle">Loading…</p>;
+  if (state.status === "error")
+    return <p className="p-6 text-sm text-brand">Could not load this file.</p>;
+  return (
+    <div className="max-h-[75vh] w-full max-w-3xl overflow-auto rounded-[10px] bg-raised p-4">
+      <pre className="font-mono text-xs whitespace-pre-wrap break-words text-ink">
+        {state.text}
+      </pre>
+    </div>
+  );
+}
+
+function PdfPreview({ url }: { url: string }) {
+  const [state, setState] = useState<Loadable<{ objectUrl: string }>>({
+    status: "loading",
+  });
+
+  useEffect(() => {
+    let live = true;
+    let created: string | null = null;
+    fetch(url)
+      .then((res) => (res.ok ? res.blob() : Promise.reject(res.status)))
+      .then((blob) => {
+        if (!live) return;
+        created = URL.createObjectURL(blob);
+        setState({ status: "ready", objectUrl: created });
+      })
+      .catch(() => live && setState({ status: "error" }));
+    return () => {
+      live = false;
+      if (created) URL.revokeObjectURL(created);
+    };
+  }, [url]);
+
+  if (state.status === "loading")
+    return <p className="p-6 text-sm text-subtle">Loading…</p>;
+  if (state.status === "error")
+    return <p className="p-6 text-sm text-brand">Could not load this file.</p>;
+  return (
+    // No sandbox attribute: Chrome's built-in PDF viewer refuses to render
+    // inside any sandboxed frame, even a permissive one. Safe here because
+    // the src is a local blob: URL built from bytes already fetched, not a
+    // live authenticated request the frame could navigate on its own.
+    <iframe
+      title="Attachment preview"
+      src={state.objectUrl}
+      className="h-[75vh] w-full max-w-3xl rounded-[10px] border-2 border-line"
+    />
+  );
+}
+
+export function AttachmentPreview({
+  files,
+  index,
+  viewing,
+  onClose,
+  onNavigate,
+}: {
+  files: BodyPart[];
+  index: number;
+  viewing: string | null;
+  onClose: () => void;
+  onNavigate: (index: number) => void;
+}) {
+  const part = files[index];
+  const url = blobUrl(part, viewing);
+  const kind = previewKind(part.type);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+      else if (event.key === "ArrowLeft" && index > 0) onNavigate(index - 1);
+      else if (event.key === "ArrowRight" && index < files.length - 1)
+        onNavigate(index + 1);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose, onNavigate, index, files.length]);
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={part.name ?? "Attachment preview"}
+      className="fixed inset-0 z-50 flex animate-fade-in flex-col bg-ink/80"
+      onMouseDown={(event) => event.target === event.currentTarget && onClose()}
+    >
+      <header className="flex shrink-0 items-center justify-between gap-3 px-5 py-3">
+        <p className="min-w-0 truncate text-sm font-bold text-white">
+          {part.name ?? "attachment"}
+          <span className="ml-2 font-medium text-white/60">
+            {size(part.size)}
+          </span>
+        </p>
+        <div className="flex shrink-0 items-center gap-2">
+          <a
+            href={url}
+            download={part.name ?? "attachment"}
+            aria-label="Download"
+            className="flex size-9 items-center justify-center rounded-[10px] text-white hover:bg-white/10"
+          >
+            <Download size={17} aria-hidden />
+          </a>
+          <button
+            type="button"
+            aria-label="Close"
+            onClick={onClose}
+            className="flex size-9 items-center justify-center rounded-[10px] text-white hover:bg-white/10"
+          >
+            <X size={19} aria-hidden />
+          </button>
+        </div>
+      </header>
+
+      <div className="relative flex min-h-0 flex-1 items-center justify-center px-5 pb-5">
+        {files.length > 1 && index > 0 && (
+          <button
+            type="button"
+            aria-label="Previous attachment"
+            onClick={() => onNavigate(index - 1)}
+            className="absolute left-2 flex size-10 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60"
+          >
+            <ChevronLeft size={22} aria-hidden />
+          </button>
+        )}
+
+        <div className="flex max-h-full max-w-full items-center justify-center">
+          {kind === "image" && (
+            <img
+              src={url}
+              alt={part.name ?? "attachment"}
+              className="max-h-[80vh] max-w-full rounded-[10px] object-contain"
+            />
+          )}
+          {kind === "video" && (
+            <video
+              src={url}
+              controls
+              className="max-h-[80vh] max-w-full rounded-[10px]"
+            />
+          )}
+          {kind === "audio" && (
+            <audio src={url} controls className="w-full max-w-md" />
+          )}
+          {kind === "text" && (
+            <TextPreview key={url} url={url} bytes={part.size} />
+          )}
+          {kind === "pdf" && <PdfPreview key={url} url={url} />}
+          {!kind && (
+            <p className="rounded-[10px] bg-surface px-6 py-4 text-sm font-bold text-ink">
+              No preview available for this file type.
+            </p>
+          )}
+        </div>
+
+        {files.length > 1 && index < files.length - 1 && (
+          <button
+            type="button"
+            aria-label="Next attachment"
+            onClick={() => onNavigate(index + 1)}
+            className="absolute right-2 flex size-10 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60"
+          >
+            <ChevronRight size={22} aria-hidden />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/mail/editor.tsx b/app/admin/mail/editor.tsx
index a485132a..d23b3b59 100644
--- a/app/admin/mail/editor.tsx
+++ b/app/admin/mail/editor.tsx
@@ -1,24 +1,49 @@
 "use client";
 
-import { useEffect, type RefObject } from "react";
+import { useCallback, useEffect, useState, type RefObject } from "react";
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  List,
+  ListOrdered,
+  Quote,
+  Link2,
+  RemoveFormatting,
+} from "lucide-react";
 import { harden } from "./html";
 import { ask } from "../ask";
 
-const COMMANDS: [
-  command: string,
-  label: string,
-  title: string,
-  style: string,
-][] = [
-  ["bold", "B", "Bold", "font-black"],
-  ["italic", "I", "Italic", "font-serif italic"],
-  ["underline", "U", "Underline", "underline"],
-  ["insertUnorderedList", "•", "Bulleted list", ""],
-  ["insertOrderedList", "1.", "Numbered list", ""],
+type Command = {
+  command: string;
+  value?: string;
+  icon: typeof Bold;
+  title: string;
+};
+
+const FORMAT_COMMANDS: Command[] = [
+  { command: "bold", icon: Bold, title: "Bold (Ctrl+B)" },
+  { command: "italic", icon: Italic, title: "Italic (Ctrl+I)" },
+  { command: "underline", icon: Underline, title: "Underline (Ctrl+U)" },
+  { command: "strikeThrough", icon: Strikethrough, title: "Strikethrough" },
+];
+
+const BLOCK_COMMANDS: Command[] = [
+  { command: "insertUnorderedList", icon: List, title: "Bulleted list" },
+  { command: "insertOrderedList", icon: ListOrdered, title: "Numbered list" },
+  {
+    command: "formatBlock",
+    value: "<blockquote>",
+    icon: Quote,
+    title: "Quote",
+  },
 ];
 
-const BUTTON =
-  "min-w-8 rounded-[8px] border-2 border-line bg-surface px-2 py-0.5 text-sm font-bold hover:bg-tint";
+const buttonClass = (active: boolean) =>
+  `flex size-8 items-center justify-center rounded-[8px] border-2 border-line ${
+    active ? "bg-brand text-brand-ink" : "bg-surface text-ink hover:bg-tint"
+  }`;
 
 export function Editor({
   editorRef,
@@ -29,6 +54,8 @@ export function Editor({
   initialHtml: string;
   autoFocus?: boolean;
 }) {
+  const [active, setActive] = useState<ReadonlySet<string>>(new Set());
+
   useEffect(() => {
     const el = editorRef.current;
     if (!el) return;
@@ -43,9 +70,46 @@ export function Editor({
     selection?.addRange(range);
   }, [editorRef, autoFocus]);
 
+  const syncActive = useCallback(() => {
+    const el = editorRef.current;
+    if (!el || document.activeElement !== el) return;
+    const next = new Set<string>();
+    for (const { command } of [...FORMAT_COMMANDS, ...BLOCK_COMMANDS]) {
+      try {
+        if (command === "formatBlock") {
+          if (
+            document.queryCommandValue("formatBlock").toLowerCase() ===
+            "blockquote"
+          )
+            next.add(command);
+        } else if (document.queryCommandState(command)) {
+          next.add(command);
+        }
+      } catch {
+        // Some commands throw on unsupported selections; leave inactive.
+      }
+    }
+    setActive(next);
+  }, [editorRef]);
+
+  useEffect(() => {
+    document.addEventListener("selectionchange", syncActive);
+    return () => document.removeEventListener("selectionchange", syncActive);
+  }, [syncActive]);
+
   const run = (command: string, value?: string) => {
     editorRef.current?.focus();
     document.execCommand(command, false, value);
+    syncActive();
+  };
+
+  /** Shift+Enter is a soft break within the same paragraph, matching
+   *  Gmail/Outlook; plain Enter keeps the browser's own new-paragraph
+   *  and list handling. */
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "Enter" || !event.shiftKey) return;
+    event.preventDefault();
+    document.execCommand("insertLineBreak");
   };
 
   const addLink = async () => {
@@ -62,30 +126,55 @@ export function Editor({
     run("createLink", /^(https?:|mailto:)/i.test(url) ? url : `https://${url}`);
   };
 
+  const toolbarButton = ({ command, value, icon: Icon, title }: Command) => (
+    <button
+      key={command + (value ?? "")}
+      type="button"
+      title={title}
+      aria-label={title}
+      aria-pressed={active.has(command)}
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={() =>
+        // formatBlock doesn't toggle itself off natively: re-running it with
+        // the same tag while already a quote is a no-op, so switch back to
+        // a plain paragraph instead.
+        run(
+          command,
+          command === "formatBlock" && active.has(command) ? "<p>" : value,
+        )
+      }
+      className={buttonClass(active.has(command))}
+    >
+      <Icon size={15} aria-hidden />
+    </button>
+  );
+
   return (
     <div className="overflow-hidden rounded-[10px] border-2 border-line transition-colors duration-[var(--dur-fast)] ease-smooth focus-within:border-brand">
       <div className="flex flex-wrap items-center gap-1.5 border-b-2 border-line bg-tint px-2 py-1.5">
-        {COMMANDS.map(([command, label, title, style]) => (
-          <button
-            key={command}
-            type="button"
-            title={title}
-            aria-label={title}
-            onMouseDown={(event) => event.preventDefault()}
-            onClick={() => run(command)}
-            className={`${BUTTON} ${style}`}
-          >
-            {label}
-          </button>
-        ))}
+        {FORMAT_COMMANDS.map(toolbarButton)}
+        <span className="mx-0.5 h-5 w-px bg-line" aria-hidden />
+        {BLOCK_COMMANDS.map(toolbarButton)}
+        <span className="mx-0.5 h-5 w-px bg-line" aria-hidden />
         <button
           type="button"
           title="Insert link"
+          aria-label="Insert link"
           onMouseDown={(event) => event.preventDefault()}
           onClick={() => void addLink()}
-          className={BUTTON}
+          className={buttonClass(false)}
+        >
+          <Link2 size={15} aria-hidden />
+        </button>
+        <button
+          type="button"
+          title="Clear formatting"
+          aria-label="Clear formatting"
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => run("removeFormat")}
+          className={buttonClass(false)}
         >
-          Link
+          <RemoveFormatting size={15} aria-hidden />
         </button>
       </div>
       <div
@@ -95,8 +184,13 @@ export function Editor({
         role="textbox"
         aria-multiline="true"
         aria-label="Message body"
+        onKeyDown={onKeyDown}
+        onKeyUp={syncActive}
+        onMouseUp={syncActive}
+        onFocus={syncActive}
+        onBlur={() => setActive(new Set())}
         dangerouslySetInnerHTML={{ __html: initialHtml }}
-        className="max-h-[45vh] min-h-64 overflow-y-auto px-3 py-2 focus:outline-none empty:before:text-subtle empty:before:content-['Write_your_message…'] [&_a]:text-brand [&_a]:underline [&_blockquote]:my-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6"
+        className="max-h-[45vh] min-h-64 overflow-y-auto px-3 py-2 focus:outline-none empty:before:text-subtle empty:before:content-['Write_your_message…'] [&_a]:text-brand [&_a]:underline [&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-line [&_blockquote]:pl-3 [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6"
       />
     </div>
   );
diff --git a/app/admin/mail/html.ts b/app/admin/mail/html.ts
index da0e8c06..7f03242c 100644
--- a/app/admin/mail/html.ts
+++ b/app/admin/mail/html.ts
@@ -26,6 +26,7 @@ export const buildQuote = async (message: MessageSummary): Promise<string> => {
   const doc = document.implementation.createHTMLDocument("");
   const sender = message.from?.[0];
   const attribution = doc.createElement("div");
+  attribution.setAttribute("style", "margin-top:0.75em");
   attribution.textContent = `On ${new Date(
     message.receivedAt,
   ).toLocaleString()}, ${sender?.name || sender?.email || "someone"} wrote:`;
diff --git a/app/admin/mail/message-view.tsx b/app/admin/mail/message-view.tsx
index f80f2aa6..6b2f6f5e 100644
--- a/app/admin/mail/message-view.tsx
+++ b/app/admin/mail/message-view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { ChevronDown, Paperclip, ShieldAlert } from "lucide-react";
+import { ChevronDown, Eye, Paperclip, ShieldAlert } from "lucide-react";
 import type {
   BodyPart,
   MessageDetail,
@@ -10,6 +10,12 @@ import type {
 import { ExternalTag } from "./message-list";
 import { isExternalSender } from "./external";
 import { withAs } from "./inbox-picker";
+import {
+  AttachmentPreview,
+  blobUrl,
+  previewKind,
+  size,
+} from "./attachment-preview";
 
 const addressLine = (list: MessageDetail["from"]) =>
   (list ?? []).map((a) => a.name || a.email).join(", ");
@@ -21,26 +27,14 @@ const fullAddress = (a: { name: string | null; email: string } | undefined) => {
   return a.email || a.name || "Unknown sender";
 };
 
-const size = (bytes: number) =>
-  bytes < 1024
-    ? `${bytes} B`
-    : bytes < 1024 * 1024
-      ? `${Math.round(bytes / 1024)} KB`
-      : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+const ATTACHMENT_CHIP =
+  "flex items-center gap-1.5 rounded-[10px] border-2 border-line bg-raised px-2.5 py-1 text-xs font-bold text-ink hover:bg-tint";
 
 const downloadable = (parts: BodyPart[] | undefined) =>
   (parts ?? []).filter((part) => part.blobId && !part.cid);
 
 type RenderedBody = { html: string; blocked: boolean };
 
-const blobUrl = (part: BodyPart, viewing: string | null) =>
-  withAs(
-    `/api/mail/blob/${encodeURIComponent(part.blobId!)}?name=${encodeURIComponent(
-      part.name ?? "attachment",
-    )}&type=${encodeURIComponent(part.type)}`,
-    viewing,
-  );
-
 const useDarkTheme = () => {
   const [dark, setDark] = useState(false);
   useEffect(() => {
@@ -126,6 +120,7 @@ function MessageView({
   const [showImages, setShowImages] = useState(false);
   const [blocked, setBlocked] = useState(false);
   const [details, setDetails] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState<number | null>(null);
   const dark = useDarkTheme();
 
   useEffect(() => {
@@ -225,27 +220,55 @@ function MessageView({
 
         {files.length > 0 && (
           <ul className="mt-2.5 flex flex-wrap gap-2">
-            {files.map((part) => (
-              <li key={part.blobId}>
-                <a
-                  href={blobUrl(part, viewing)}
-                  download={part.name ?? "attachment"}
-                  className="flex items-center gap-1.5 rounded-[10px] border-2 border-line bg-raised px-2.5 py-1 text-xs font-bold text-ink hover:bg-tint"
-                >
-                  <Paperclip size={12} aria-hidden />
+            {files.map((part, i) => {
+              const label = (
+                <>
                   <span className="max-w-48 truncate">
                     {part.name ?? "attachment"}
                   </span>
                   <span className="font-medium text-subtle">
                     {size(part.size)}
                   </span>
-                </a>
-              </li>
-            ))}
+                </>
+              );
+              return (
+                <li key={part.blobId}>
+                  {previewKind(part.type) ? (
+                    <button
+                      type="button"
+                      onClick={() => setPreviewIndex(i)}
+                      className={ATTACHMENT_CHIP}
+                    >
+                      <Eye size={12} aria-hidden />
+                      {label}
+                    </button>
+                  ) : (
+                    <a
+                      href={blobUrl(part, viewing)}
+                      download={part.name ?? "attachment"}
+                      className={ATTACHMENT_CHIP}
+                    >
+                      <Paperclip size={12} aria-hidden />
+                      {label}
+                    </a>
+                  )}
+                </li>
+              );
+            })}
           </ul>
         )}
       </header>
 
+      {previewIndex !== null && (
+        <AttachmentPreview
+          files={files}
+          index={previewIndex}
+          viewing={viewing}
+          onClose={() => setPreviewIndex(null)}
+          onNavigate={setPreviewIndex}
+        />
+      )}
+
       {blocked && (
         <div className="flex items-center justify-between gap-3 border-b-2 border-line bg-tint px-5 py-2">
           <p className="text-xs font-semibold text-ink">
@@ -263,11 +286,15 @@ function MessageView({
       )}
 
       {/* Sandboxed: the body is untrusted even after sanitising. srcdoc rather
-          than src so the app's own X-Frame-Options cannot block it. */}
+          than src so the app's own X-Frame-Options cannot block it.
+          allow-popups (+ allow-popups-to-escape-sandbox so the opened tab
+          isn't itself sandboxed) lets target="_blank" links in the body
+          actually open, without granting the frame scripts, forms or
+          same-origin access. */}
       <iframe
         title="Message body"
         srcDoc={body}
-        sandbox=""
+        sandbox="allow-popups allow-popups-to-escape-sandbox"
         referrerPolicy="no-referrer"
         className="w-full min-h-0 flex-1 border-0 bg-surface"
       />
diff --git a/app/api/mail/messages/[id]/body/route.ts b/app/api/mail/messages/[id]/body/route.ts
index 20d44297..2394daae 100644
--- a/app/api/mail/messages/[id]/body/route.ts
+++ b/app/api/mail/messages/[id]/body/route.ts
@@ -66,6 +66,9 @@ export const GET = async (
       })
     : { html: emailBodyToText(raw ?? ""), blocked: false };
 
+  // HTML bodies keep their own light background: their inline colors (e.g.
+  // dark text with no explicit background-color) assume a white canvas, and
+  // forcing the dark palette onto them can make that text unreadable.
   const dark = !isHtml && search.get("theme") === "dark";
   const palette = dark
     ? { fg: "#f4f1ee", bg: "#1a181b", link: "#d98079" }

From 2bc9a0a35acb88c42fa92830db5020cdf7f26aeb Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Wed, 16 Sep 2026 00:44:47 -0400
Subject: [PATCH 2/7] Widen the PDF and text attachment preview panels

---
 app/admin/mail/attachment-preview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/admin/mail/attachment-preview.tsx b/app/admin/mail/attachment-preview.tsx
index eea0be05..33926f3b 100644
--- a/app/admin/mail/attachment-preview.tsx
+++ b/app/admin/mail/attachment-preview.tsx
@@ -75,7 +75,7 @@ function TextPreview({ url, bytes }: { url: string; bytes: number }) {
   if (state.status === "error")
     return <p className="p-6 text-sm text-brand">Could not load this file.</p>;
   return (
-    <div className="max-h-[75vh] w-full max-w-3xl overflow-auto rounded-[10px] bg-raised p-4">
+    <div className="max-h-[85vh] w-full max-w-4xl overflow-auto rounded-[10px] bg-raised p-4">
       <pre className="font-mono text-xs whitespace-pre-wrap break-words text-ink">
         {state.text}
       </pre>
@@ -117,7 +117,7 @@ function PdfPreview({ url }: { url: string }) {
     <iframe
       title="Attachment preview"
       src={state.objectUrl}
-      className="h-[75vh] w-full max-w-3xl rounded-[10px] border-2 border-line"
+      className="h-[85vh] w-full max-w-5xl rounded-[10px] border-2 border-line"
     />
   );
 }

From 774e9dcde16130d32b4a073c7b969aa9a36e7032 Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Wed, 16 Sep 2026 00:53:30 -0400
Subject: [PATCH 3/7] Fix Insert Link silently doing nothing without a text
 selection

---
 app/admin/mail/editor.tsx | 44 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/app/admin/mail/editor.tsx b/app/admin/mail/editor.tsx
index d23b3b59..df40dd58 100644
--- a/app/admin/mail/editor.tsx
+++ b/app/admin/mail/editor.tsx
@@ -113,6 +113,19 @@ export function Editor({
   };
 
   const addLink = async () => {
+    // The ask() dialog steals focus while awaited, and browsers don't
+    // reliably restore the editor's caret/selection on refocus — save the
+    // range now and restore it before acting, or createLink silently does
+    // nothing.
+    const el = editorRef.current;
+    const selection = window.getSelection();
+    const savedRange =
+      selection &&
+      selection.rangeCount > 0 &&
+      el?.contains(selection.anchorNode)
+        ? selection.getRangeAt(0).cloneRange()
+        : null;
+
     const url = (
       await ask({
         title: "Insert a link",
@@ -123,7 +136,36 @@ export function Editor({
       })
     )?.trim();
     if (!url) return;
-    run("createLink", /^(https?:|mailto:)/i.test(url) ? url : `https://${url}`);
+
+    el?.focus();
+    if (savedRange) {
+      selection?.removeAllRanges();
+      selection?.addRange(savedRange);
+    }
+
+    const href = /^(https?:|mailto:)/i.test(url) ? url : `https://${url}`;
+    // createLink needs selected text to turn into a link; with just a caret
+    // (the common case when nothing was highlighted first), insert the URL
+    // itself as the link text instead, matching Gmail/Outlook. Built as a
+    // real node, not an HTML string, so a stray `"` or `<` in the typed URL
+    // can't break out of the markup.
+    if (savedRange && !savedRange.collapsed) {
+      document.execCommand("createLink", false, href);
+    } else {
+      const range = window.getSelection()?.getRangeAt(0);
+      if (range) {
+        const link = document.createElement("a");
+        link.href = href;
+        link.textContent = href;
+        range.deleteContents();
+        range.insertNode(link);
+        range.setStartAfter(link);
+        range.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+    syncActive();
   };
 
   const toolbarButton = ({ command, value, icon: Icon, title }: Command) => (

From a0f4f3c290063b533e74e9978b80326ef198086f Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Wed, 16 Sep 2026 01:15:38 -0400
Subject: [PATCH 4/7] Fix mobile mail experience: modals trapped behind the tab
 bar, cramped action bar

- Compose and the attachment preview portal to document.body: <main>'s
  fade-in animation creates a stacking context that otherwise traps
  their fixed overlay below the mobile tab bar, making Send unreachable.
- Message action buttons (Reply, Forward, Archive, Delete, ...) go
  icon-only below sm, instead of wrapping their full labels into three
  rows above the message content.
---
 app/admin/mail/attachment-preview.tsx |  9 ++++-
 app/admin/mail/compose.tsx            | 10 ++++-
 app/admin/mail/page.tsx               | 53 ++++++++++++++++++++-------
 3 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/app/admin/mail/attachment-preview.tsx b/app/admin/mail/attachment-preview.tsx
index 33926f3b..2561a410 100644
--- a/app/admin/mail/attachment-preview.tsx
+++ b/app/admin/mail/attachment-preview.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
 import type { BodyPart } from "@/lib/mail/jmap-mail";
 import { withAs } from "./inbox-picker";
@@ -150,7 +151,10 @@ export function AttachmentPreview({
     return () => document.removeEventListener("keydown", onKey);
   }, [onClose, onNavigate, index, files.length]);
 
-  return (
+  // Portaled to the document body for the same reason as the compose
+  // modal: <main>'s fade-in animation creates a stacking context that
+  // would otherwise trap this overlay below the mobile tab bar.
+  return createPortal(
     <div
       role="dialog"
       aria-modal="true"
@@ -237,6 +241,7 @@ export function AttachmentPreview({
           </button>
         )}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }
diff --git a/app/admin/mail/compose.tsx b/app/admin/mail/compose.tsx
index ccc86f08..8c8f44ea 100644
--- a/app/admin/mail/compose.tsx
+++ b/app/admin/mail/compose.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Paperclip, X } from "lucide-react";
 import { Editor } from "./editor";
 import { toPlainText } from "./html";
@@ -113,7 +114,11 @@ export function Compose({
     }
   };
 
-  return (
+  // Portaled to the document body: rendered under <main>, whose own
+  // fade-in animation creates a CSS stacking context that would otherwise
+  // trap this fixed overlay below the (higher DOM, but non-positioned
+  // relative to it) mobile tab bar.
+  return createPortal(
     <div className="fixed inset-0 z-50 flex animate-fade-in items-center justify-center bg-ink/40 px-4 dark:bg-surface/80">
       <div
         role="dialog"
@@ -256,6 +261,7 @@ export function Compose({
           </div>
         </footer>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }
diff --git a/app/admin/mail/page.tsx b/app/admin/mail/page.tsx
index 42b121ee..75eebf81 100644
--- a/app/admin/mail/page.tsx
+++ b/app/admin/mail/page.tsx
@@ -2,7 +2,18 @@
 
 import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { ArrowLeft, Eye, MailOpen, Search, Star } from "lucide-react";
+import {
+  Archive,
+  ArrowLeft,
+  Eye,
+  Forward as ForwardIcon,
+  MailOpen,
+  Reply as ReplyIcon,
+  ReplyAll as ReplyAllIcon,
+  Search,
+  Star,
+  Trash2,
+} from "lucide-react";
 import { logout } from "@/lib/api";
 import type { MailDeletionRequest } from "@/lib/api/types";
 import type { Mailbox, MessageSummary } from "@/lib/mail/jmap-mail";
@@ -937,22 +948,32 @@ function MessageActions({
         <>
           <button
             type="button"
-            className={ACTION}
+            aria-label="Reply"
+            className={`${ACTION} flex items-center gap-1.5`}
             onClick={() => onReply(false)}
           >
-            Reply
+            <ReplyIcon size={15} aria-hidden />
+            <span className="hidden sm:inline">Reply</span>
           </button>
           {replyAll && (
             <button
               type="button"
-              className={ACTION}
+              aria-label="Reply all"
+              className={`${ACTION} flex items-center gap-1.5`}
               onClick={() => onReply(true)}
             >
-              Reply all
+              <ReplyAllIcon size={15} aria-hidden />
+              <span className="hidden sm:inline">Reply all</span>
             </button>
           )}
-          <button type="button" className={ACTION} onClick={onForward}>
-            Forward
+          <button
+            type="button"
+            aria-label="Forward"
+            className={`${ACTION} flex items-center gap-1.5`}
+            onClick={onForward}
+          >
+            <ForwardIcon size={15} aria-hidden />
+            <span className="hidden sm:inline">Forward</span>
           </button>
 
           <div className="ml-auto flex flex-wrap items-center gap-1.5">
@@ -999,12 +1020,14 @@ function MessageActions({
             </select>
             <button
               type="button"
+              aria-label="Archive"
               disabled={busy || inArchive}
               title={inArchive ? "Already in the archive" : undefined}
-              className={ACTION}
+              className={`${ACTION} flex items-center gap-1.5`}
               onClick={() => onMove({ to: "archive" })}
             >
-              Archive
+              <Archive size={15} aria-hidden />
+              <span className="hidden sm:inline">Archive</span>
             </button>
             {inTrash ? (
               deletionPending ? (
@@ -1014,21 +1037,25 @@ function MessageActions({
               ) : (
                 <button
                   type="button"
+                  aria-label="Request deletion"
                   disabled={busy}
-                  className={`${ACTION} text-destructive`}
+                  className={`${ACTION} flex items-center gap-1.5 text-destructive`}
                   onClick={onPurge}
                 >
-                  Request deletion
+                  <Trash2 size={15} aria-hidden />
+                  <span className="hidden sm:inline">Request deletion</span>
                 </button>
               )
             ) : (
               <button
                 type="button"
+                aria-label="Delete"
                 disabled={busy}
-                className={`${ACTION} text-brand`}
+                className={`${ACTION} flex items-center gap-1.5 text-brand`}
                 onClick={() => onMove({ to: "trash" })}
               >
-                Delete
+                <Trash2 size={15} aria-hidden />
+                <span className="hidden sm:inline">Delete</span>
               </button>
             )}
           </div>

From 94e3a4ffdb49658007722d8bfaf3d9a76c8e5c1d Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Wed, 16 Sep 2026 02:22:55 -0400
Subject: [PATCH 5/7] Fix mobile polish issues: tiny message body, palette
 exit, safe-area insets

- Message body now sizes to its content and scrolls as one page with the
  header instead of being squeezed into whatever space is left over,
  which on a phone could be a couple of lines of text.
- Command palette had no way to close it without a keyboard; add a
  visible close button on mobile.
- Bottom tab bar pins Email + Profile specifically (what execs use most)
  instead of whatever happens to be first in the sections list, and its
  logo now matches the rounded corners used elsewhere.
- Header icon buttons (search, theme, view site, log out) now share the
  same height/padding instead of subtly different sizes.
- viewport-fit=cover + safe-area-inset padding on every edge-to-edge
  mobile overlay (admin header, palette, attachment preview, event
  editor) so a notch or dynamic island doesn't sit over their controls.
---
 app/admin/events/ui.tsx               |  2 +-
 app/admin/layout.tsx                  |  2 +-
 app/admin/mail/attachment-preview.tsx |  2 +-
 app/admin/mail/message-view.tsx       | 46 ++++++++++++++++++++++-----
 app/admin/nav.tsx                     |  4 ++-
 app/admin/palette.tsx                 | 14 ++++++--
 app/layout.tsx                        | 11 ++++++-
 7 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/app/admin/events/ui.tsx b/app/admin/events/ui.tsx
index 15cb7be7..3e62fe1f 100644
--- a/app/admin/events/ui.tsx
+++ b/app/admin/events/ui.tsx
@@ -49,7 +49,7 @@ export function Sheet({
     >
       <div className="absolute inset-0 animate-fade-in bg-ink/40 dark:bg-surface/80" />
       <div className="relative flex h-full w-full animate-rise-in flex-col bg-surface sm:h-auto sm:max-h-[86vh] sm:max-w-[660px] sm:animate-pop-in sm:rounded-[20px] sm:border-2 sm:border-line sm:shadow-brut">
-        <div className="flex items-center gap-3 border-b-2 border-line px-5 py-4">
+        <div className="flex items-center gap-3 border-b-2 border-line px-5 pb-4 pt-[max(1rem,env(safe-area-inset-top))] sm:pt-4">
           <h2 className="text-lg font-extrabold text-ink">{title}</h2>
           <button
             aria-label="Close"
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index 054e13bb..862e13b2 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -104,7 +104,7 @@ function AdminShell({ children }: { children: React.ReactNode }) {
   return (
     <PaletteProvider hasMail={hasMailbox} onLogout={handleLogout}>
       <div className="flex min-h-screen flex-col">
-        <header className="flex items-center gap-3 border-b-2 border-line px-4 py-2.5 sm:px-6">
+        <header className="flex items-center gap-3 border-b-2 border-line px-4 pb-2.5 pt-[max(0.625rem,env(safe-area-inset-top))] sm:px-6">
           {onMenu ? (
             <span className="flex items-center gap-2.5">
               <Image
diff --git a/app/admin/mail/attachment-preview.tsx b/app/admin/mail/attachment-preview.tsx
index 2561a410..69ca6448 100644
--- a/app/admin/mail/attachment-preview.tsx
+++ b/app/admin/mail/attachment-preview.tsx
@@ -162,7 +162,7 @@ export function AttachmentPreview({
       className="fixed inset-0 z-50 flex animate-fade-in flex-col bg-ink/80"
       onMouseDown={(event) => event.target === event.currentTarget && onClose()}
     >
-      <header className="flex shrink-0 items-center justify-between gap-3 px-5 py-3">
+      <header className="flex shrink-0 items-center justify-between gap-3 px-5 pb-3 pt-[max(0.75rem,env(safe-area-inset-top))]">
         <p className="min-w-0 truncate text-sm font-bold text-white">
           {part.name ?? "attachment"}
           <span className="ml-2 font-medium text-white/60">
diff --git a/app/admin/mail/message-view.tsx b/app/admin/mail/message-view.tsx
index 6b2f6f5e..7641383b 100644
--- a/app/admin/mail/message-view.tsx
+++ b/app/admin/mail/message-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ChevronDown, Eye, Paperclip, ShieldAlert } from "lucide-react";
 import type {
   BodyPart,
@@ -121,8 +121,32 @@ function MessageView({
   const [blocked, setBlocked] = useState(false);
   const [details, setDetails] = useState(false);
   const [previewIndex, setPreviewIndex] = useState<number | null>(null);
+  const [bodyHeight, setBodyHeight] = useState<number | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
   const dark = useDarkTheme();
 
+  // The header (sender, subject, attachments) and the message body used to
+  // scroll independently, squeezing the body into whatever space was left
+  // over — on a phone that could be a couple of lines. allow-same-origin
+  // (still with no allow-scripts, so nothing in the body can ever execute)
+  // lets the parent measure the sandboxed document so the iframe can be
+  // sized to its content and scroll as one continuous page with everything
+  // else, like a real mail app.
+  const onBodyLoad = () => {
+    const doc = iframeRef.current?.contentDocument;
+    if (!doc?.documentElement) return;
+    setBodyHeight(doc.documentElement.scrollHeight);
+    resizeObserver.current?.disconnect();
+    resizeObserver.current = new ResizeObserver(
+      () =>
+        doc.documentElement && setBodyHeight(doc.documentElement.scrollHeight),
+    );
+    resizeObserver.current.observe(doc.documentElement);
+  };
+
+  useEffect(() => () => resizeObserver.current?.disconnect(), []);
+
   useEffect(() => {
     let live = true;
     const path = `/api/mail/messages/${encodeURIComponent(id)}`;
@@ -177,8 +201,8 @@ function MessageView({
   );
 
   return (
-    <article className="flex min-h-0 flex-1 animate-fade-in flex-col">
-      <header className="border-b-2 border-line px-5 py-3">
+    <article className="flex min-h-0 flex-1 animate-fade-in flex-col overflow-y-auto">
+      <header className="shrink-0 border-b-2 border-line px-5 py-3">
         <div className="flex flex-wrap items-center justify-between gap-2">
           <p className="flex min-w-0 flex-wrap items-center gap-1.5 text-sm font-bold text-ink">
             <span className="truncate">{fullAddress(message.from?.[0])}</span>
@@ -270,7 +294,7 @@ function MessageView({
       )}
 
       {blocked && (
-        <div className="flex items-center justify-between gap-3 border-b-2 border-line bg-tint px-5 py-2">
+        <div className="flex shrink-0 items-center justify-between gap-3 border-b-2 border-line bg-tint px-5 py-2">
           <p className="text-xs font-semibold text-ink">
             This message links to images hosted elsewhere. Loading them tells
             the sender you opened it.
@@ -289,14 +313,20 @@ function MessageView({
           than src so the app's own X-Frame-Options cannot block it.
           allow-popups (+ allow-popups-to-escape-sandbox so the opened tab
           isn't itself sandboxed) lets target="_blank" links in the body
-          actually open, without granting the frame scripts, forms or
-          same-origin access. */}
+          actually open. allow-same-origin lets the parent measure the
+          document so the iframe can be sized to its content and scroll as
+          one page with the header above it, instead of being squeezed into
+          whatever space was left over; there's still no allow-scripts, so
+          nothing inside the body can ever run regardless of origin. */}
       <iframe
+        ref={iframeRef}
         title="Message body"
         srcDoc={body}
-        sandbox="allow-popups allow-popups-to-escape-sandbox"
+        onLoad={onBodyLoad}
+        sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         referrerPolicy="no-referrer"
-        className="w-full min-h-0 flex-1 border-0 bg-surface"
+        style={{ height: bodyHeight ? `${bodyHeight}px` : "50vh" }}
+        className="w-full shrink-0 border-0 bg-surface"
       />
     </article>
   );
diff --git a/app/admin/nav.tsx b/app/admin/nav.tsx
index 05df7e99..2c39cc71 100644
--- a/app/admin/nav.tsx
+++ b/app/admin/nav.tsx
@@ -74,7 +74,9 @@ export function AdminTabBar({
   pathname: string;
 }) {
   const { open } = usePalette();
-  const pinned = sections.slice(0, 2);
+  const pinned = ["/admin/mail", "/admin/profile"]
+    .map((href) => sections.find((section) => section.href === href))
+    .filter((section): section is Section => Boolean(section));
   const current = sectionFor(pathname);
   const atHome = pathname === "/admin";
 
diff --git a/app/admin/palette.tsx b/app/admin/palette.tsx
index a5ad3736..ce39a30c 100644
--- a/app/admin/palette.tsx
+++ b/app/admin/palette.tsx
@@ -10,7 +10,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Loader2, Search } from "lucide-react";
+import { Loader2, Search, X } from "lucide-react";
 import { fetchAllEvents, type EventRecord, type WithKey } from "@/lib/api";
 import { storedTerms } from "@/lib/execs/terms";
 import type { Mailbox, MessageSummary } from "@/lib/mail/jmap-mail";
@@ -316,7 +316,7 @@ export function SearchButton() {
       onClick={open}
       aria-label="Search everything"
       title="Search everything"
-      className="flex items-center gap-2 rounded-[10px] border-2 border-line px-2.5 py-1.5 text-sm font-bold text-subtle hover:bg-tint"
+      className="inline-flex h-9 items-center gap-1 rounded-[10px] border-2 border-line px-2 text-sm font-bold text-subtle hover:bg-tint sm:px-3"
     >
       <Search size={15} aria-hidden />
       <kbd className="hidden text-[11px] font-bold sm:block">⌘K</kbd>
@@ -673,7 +673,7 @@ function Palette({
         aria-label="Search the admin portal"
         className="flex h-dvh w-full animate-pop-in flex-col overflow-hidden border-line bg-surface sm:h-auto sm:max-h-[70vh] sm:max-w-2xl sm:rounded-[20px] sm:border-2 sm:shadow-brut"
       >
-        <div className="flex shrink-0 items-center gap-2 border-b-2 border-line px-4 py-3">
+        <div className="flex shrink-0 items-center gap-2 border-b-2 border-line px-4 pb-3 pt-[max(0.75rem,env(safe-area-inset-top))]">
           <Search size={16} className="shrink-0 text-brand" aria-hidden />
           <input
             ref={input}
@@ -695,6 +695,14 @@ function Palette({
           <kbd className="hidden shrink-0 rounded-[6px] border-2 border-line px-1.5 py-0.5 text-[10px] font-bold text-subtle sm:block">
             esc
           </kbd>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close search"
+            className="shrink-0 rounded-[8px] p-1 text-subtle hover:bg-tint hover:text-ink sm:hidden"
+          >
+            <X size={18} aria-hidden />
+          </button>
         </div>
 
         <div
diff --git a/app/layout.tsx b/app/layout.tsx
index 3a228788..9f549f3f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
@@ -35,6 +35,15 @@ export const metadata: Metadata = {
   twitter: { card: "summary_large_image" },
 };
 
+// viewportFit: "cover" lets fixed headers/footers extend under a notch or
+// dynamic island, so their own safe-area-inset padding (rather than the
+// browser reserving a blank bar) is what keeps content clear of it.
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {

From 85979ec49e3f64ea11cb70d961c5c06274ac4058 Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Wed, 16 Sep 2026 03:04:25 -0400
Subject: [PATCH 6/7] Mobile polish pass across the rest of the admin:
 dashboard, analytics, events, users, aliases
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dashboard tile grid: rows no longer stretch every tile to the tallest
  sibling's height, and an odd tile out no longer sits alone with a
  blank column next to it.
- Analytics: the cost table was blowing out the whole page's width and
  dragging unrelated cards off-screen with it; scoped the scroll to the
  table itself.
- Events: New Event sheet was rendering behind the mobile tab bar for
  the same stacking-context reason as the mail modals; Edit/Delete
  buttons now match height; the poster thumbnail no longer leaves a
  dead gap under it.
- Users: directory entries with no linked account no longer show a
  lone "—" line; the "About you" term chips' remove button had almost
  no tap target.
- Aliases: the catch-all address could overflow past its card instead
  of truncating; shared mailbox detail rows now stay two-column on
  phone instead of stacking into twice as many lines.
---
 app/admin/analytics/page.tsx    | 134 ++++++++++++++++----------------
 app/admin/documents/page.tsx    |  20 ++---
 app/admin/events/page.tsx       |   2 +-
 app/admin/events/ui.tsx         |  11 ++-
 app/admin/mail/aliases/page.tsx |   2 +-
 app/admin/page.tsx              |   5 +-
 app/admin/users/page.tsx        |  14 ++--
 app/admin/users/terms-field.tsx |   2 +-
 app/admin/users/ui.tsx          |   2 +-
 9 files changed, 104 insertions(+), 88 deletions(-)

diff --git a/app/admin/analytics/page.tsx b/app/admin/analytics/page.tsx
index 7d156666..2cba5001 100644
--- a/app/admin/analytics/page.tsx
+++ b/app/admin/analytics/page.tsx
@@ -425,74 +425,78 @@ export default function AnalyticsPage() {
               </dl>
 
               <div className="mt-6 grid gap-6">
-                <Card title="Where the money goes" hint="Last 30 days, USD">
-                  <SplitBar
-                    segments={costs.last30.lines.map((line) => ({
-                      label: line.label,
-                      value: line.amount,
-                    }))}
-                    format={usd}
-                  />
-                  <div className="mt-5 overflow-x-auto">
-                    <table className="w-full text-sm">
-                      <thead>
-                        <tr className="text-left text-xs font-bold uppercase tracking-wide text-subtle">
-                          <th className="pb-2 font-bold">Item</th>
-                          <th className="pb-2 text-right font-bold">
-                            Quantity
-                          </th>
-                          <th className="pb-2 text-right font-bold">
-                            Unit price
-                          </th>
-                          <th className="pb-2 text-right font-bold">Amount</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {costs.last30.lines.map((line) => (
-                          <tr
-                            key={line.key}
-                            className="border-t-2 border-line/20 transition-colors duration-[var(--dur-fast)] ease-smooth hover:bg-tint"
-                          >
-                            <td className="py-2 pr-3">
-                              <a
-                                href={line.source}
-                                target="_blank"
-                                rel="noreferrer"
-                                className="font-bold text-ink underline decoration-line/60 underline-offset-2 hover:decoration-brand"
-                              >
-                                {line.label}
-                              </a>
-                              {line.note && (
-                                <span className="ml-2 whitespace-nowrap text-xs text-subtle">
-                                  {line.note}
-                                </span>
-                              )}
-                            </td>
-                            <td className="whitespace-nowrap py-2 pl-3 text-right tabular-nums text-subtle">
-                              {quantity(line)}
-                            </td>
-                            <td className="whitespace-nowrap py-2 pl-3 text-right tabular-nums text-subtle">
-                              ${line.unitPrice}
+                <div className="min-w-0">
+                  <Card title="Where the money goes" hint="Last 30 days, USD">
+                    <SplitBar
+                      segments={costs.last30.lines.map((line) => ({
+                        label: line.label,
+                        value: line.amount,
+                      }))}
+                      format={usd}
+                    />
+                    <div className="mt-5 overflow-x-auto">
+                      <table className="w-full text-sm">
+                        <thead>
+                          <tr className="text-left text-xs font-bold uppercase tracking-wide text-subtle">
+                            <th className="pb-2 font-bold">Item</th>
+                            <th className="pb-2 text-right font-bold">
+                              Quantity
+                            </th>
+                            <th className="pb-2 text-right font-bold">
+                              Unit price
+                            </th>
+                            <th className="pb-2 text-right font-bold">
+                              Amount
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {costs.last30.lines.map((line) => (
+                            <tr
+                              key={line.key}
+                              className="border-t-2 border-line/20 transition-colors duration-[var(--dur-fast)] ease-smooth hover:bg-tint"
+                            >
+                              <td className="py-2 pr-3">
+                                <a
+                                  href={line.source}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                  className="font-bold text-ink underline decoration-line/60 underline-offset-2 hover:decoration-brand"
+                                >
+                                  {line.label}
+                                </a>
+                                {line.note && (
+                                  <span className="ml-2 whitespace-nowrap text-xs text-subtle">
+                                    {line.note}
+                                  </span>
+                                )}
+                              </td>
+                              <td className="whitespace-nowrap py-2 pl-3 text-right tabular-nums text-subtle">
+                                {quantity(line)}
+                              </td>
+                              <td className="whitespace-nowrap py-2 pl-3 text-right tabular-nums text-subtle">
+                                ${line.unitPrice}
+                              </td>
+                              <td className="py-2 pl-3 text-right font-bold tabular-nums text-ink">
+                                {usd(line.amount)}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                        <tfoot>
+                          <tr className="border-t-2 border-line">
+                            <td className="pt-2 font-bold text-ink" colSpan={3}>
+                              Total
                             </td>
-                            <td className="py-2 pl-3 text-right font-bold tabular-nums text-ink">
-                              {usd(line.amount)}
+                            <td className="pt-2 text-right font-extrabold tabular-nums text-brand">
+                              {usd(costs.last30.total)}
                             </td>
                           </tr>
-                        ))}
-                      </tbody>
-                      <tfoot>
-                        <tr className="border-t-2 border-line">
-                          <td className="pt-2 font-bold text-ink" colSpan={3}>
-                            Total
-                          </td>
-                          <td className="pt-2 text-right font-extrabold tabular-nums text-brand">
-                            {usd(costs.last30.total)}
-                          </td>
-                        </tr>
-                      </tfoot>
-                    </table>
-                  </div>
-                </Card>
+                        </tfoot>
+                      </table>
+                    </div>
+                  </Card>
+                </div>
 
                 <Card
                   title="Mail volume"
diff --git a/app/admin/documents/page.tsx b/app/admin/documents/page.tsx
index d92ba16c..236025c1 100644
--- a/app/admin/documents/page.tsx
+++ b/app/admin/documents/page.tsx
@@ -507,15 +507,17 @@ export default function DocumentsPage() {
                   key={doc.$key}
                 >
                   {doc.currentVersionId && (
-                    <input
-                      aria-label={`Select ${doc.title}`}
-                      checked={checked.has(doc.$key)}
-                      className="ml-1 size-4 shrink-0 accent-brand"
-                      onChange={(e) =>
-                        toggleChecked(doc.$key, e.target.checked)
-                      }
-                      type="checkbox"
-                    />
+                    <label className="-m-2 flex shrink-0 cursor-pointer p-2">
+                      <input
+                        aria-label={`Select ${doc.title}`}
+                        checked={checked.has(doc.$key)}
+                        className="ml-1 size-4 shrink-0 accent-brand"
+                        onChange={(e) =>
+                          toggleChecked(doc.$key, e.target.checked)
+                        }
+                        type="checkbox"
+                      />
+                    </label>
                   )}
                   <Link
                     className="flex min-w-0 flex-1 items-center gap-3"
diff --git a/app/admin/events/page.tsx b/app/admin/events/page.tsx
index ef11cecb..7b68550c 100644
--- a/app/admin/events/page.tsx
+++ b/app/admin/events/page.tsx
@@ -47,7 +47,7 @@ function EventRow({
 
   return (
     <li className="flex flex-wrap items-start gap-4 rounded-[16px] border-2 border-line bg-surface p-3 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)] sm:p-4">
-      <div className="relative size-16 shrink-0 overflow-hidden rounded-[10px] border-2 border-line bg-tint">
+      <div className="relative min-h-16 w-16 shrink-0 self-stretch overflow-hidden rounded-[10px] border-2 border-line bg-tint">
         {event.image?.url ? (
           <Image
             alt=""
diff --git a/app/admin/events/ui.tsx b/app/admin/events/ui.tsx
index 3e62fe1f..71d0bf9c 100644
--- a/app/admin/events/ui.tsx
+++ b/app/admin/events/ui.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
+import { createPortal } from "react-dom";
 
 const base =
   "inline-flex items-center justify-center gap-2 rounded-[10px] border-2 border-line px-4 py-2 text-sm font-bold disabled:pointer-events-none disabled:opacity-50";
@@ -9,7 +10,7 @@ export const btn = {
   primary: `${base} bg-brand text-brand-ink shadow-brut-sm hover:-translate-y-0.5 motion-reduce:hover:translate-y-0`,
   secondary: `${base} bg-surface text-ink shadow-brut-sm hover:-translate-y-0.5 hover:bg-tint motion-reduce:hover:translate-y-0`,
   danger: `${base} border-destructive bg-destructive text-surface shadow-brut-sm hover:-translate-y-0.5 motion-reduce:hover:translate-y-0`,
-  quiet: `${base} border-transparent px-2.5 py-1.5 text-destructive hover:bg-tint`,
+  quiet: `${base} border-transparent px-2.5 py-2 text-destructive hover:bg-tint`,
 };
 
 export const field =
@@ -40,7 +41,10 @@ export function Sheet({
     };
   }, [onClose]);
 
-  return (
+  // Portaled to the document body: rendered under <main>, whose own
+  // fade-in animation creates a CSS stacking context that would otherwise
+  // trap this fixed overlay below the mobile tab bar.
+  return createPortal(
     <div
       aria-label={title}
       aria-modal="true"
@@ -62,6 +66,7 @@ export function Sheet({
         </div>
         {children}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }
diff --git a/app/admin/mail/aliases/page.tsx b/app/admin/mail/aliases/page.tsx
index f6d8d4b6..a0ea7468 100644
--- a/app/admin/mail/aliases/page.tsx
+++ b/app/admin/mail/aliases/page.tsx
@@ -30,7 +30,7 @@ const Tile = ({
   detail: string;
   children?: React.ReactNode;
 }) => (
-  <div className="animate-rise-in rounded-[16px] border-2 border-line bg-surface p-3.5 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)]">
+  <div className="min-w-0 animate-rise-in rounded-[16px] border-2 border-line bg-surface p-3.5 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)]">
     <div className="text-xs font-bold uppercase tracking-wide text-subtle">
       {label}
     </div>
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index c1316a55..3a705118 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -29,15 +29,16 @@ export default function AdminMenu() {
       </h1>
       <p className="mt-2 text-subtle">Pick what you want to work on.</p>
 
-      <div className="mt-9 grid grid-cols-2 gap-3 md:grid-cols-3">
+      <div className="mt-9 grid grid-cols-2 items-start gap-3 md:grid-cols-3">
         {open.map((section, index) => {
           const Icon = SECTION_ICONS[section.href];
+          const last = index === open.length - 1 && open.length % 2 === 1;
           return (
             <Link
               key={section.href}
               href={section.href}
               style={{ animationDelay: `${index * 20}ms` }}
-              className="group flex animate-rise-in items-start gap-4 rounded-[16px] border-2 border-line bg-surface p-4 shadow-brut hover:-translate-y-0.5 hover:bg-tint hover:shadow-[6px_8px_0_0_var(--shade)] motion-reduce:hover:translate-y-0"
+              className={`group flex animate-rise-in items-start gap-4 rounded-[16px] border-2 border-line bg-surface p-4 shadow-brut hover:-translate-y-0.5 hover:bg-tint hover:shadow-[6px_8px_0_0_var(--shade)] motion-reduce:hover:translate-y-0 ${last ? "col-span-2 md:col-span-1" : ""}`}
             >
               {Icon && (
                 <span className="grid size-9 shrink-0 place-items-center rounded-[12px] border-2 border-line bg-tint text-brand transition duration-[var(--dur)] ease-smooth group-hover:-rotate-6 group-hover:bg-brand group-hover:text-brand-ink motion-reduce:group-hover:rotate-0">
diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index 03b72258..18d04133 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -318,12 +318,16 @@ export default function UsersPage() {
                         )}
                         {!entry.signupKey && <Pill>No account</Pill>}
                       </span>
-                      <span className="mt-1 block truncate text-sm text-subtle">
-                        <span className="font-mono">
-                          {entry.username ?? "—"}
+                      {(entry.username || entry.email) && (
+                        <span className="mt-1 block truncate text-sm text-subtle">
+                          {entry.username && (
+                            <span className="font-mono">{entry.username}</span>
+                          )}
+                          {entry.email
+                            ? `${entry.username ? " · " : ""}${entry.email}`
+                            : ""}
                         </span>
-                        {entry.email ? ` · ${entry.email}` : ""}
-                      </span>
+                      )}
                     </button>
                   </li>
                 ))}
diff --git a/app/admin/users/terms-field.tsx b/app/admin/users/terms-field.tsx
index bf9bd61a..dadb423d 100644
--- a/app/admin/users/terms-field.tsx
+++ b/app/admin/users/terms-field.tsx
@@ -35,7 +35,7 @@ export function TermsField({
               {!(keepOne && terms.length === 1) && (
                 <button
                   aria-label={`Remove ${term}`}
-                  className="opacity-70 hover:opacity-100"
+                  className="-m-1.5 p-1.5 opacity-70 hover:opacity-100"
                   onClick={() => onChange(terms.filter((t) => t !== term))}
                   type="button"
                 >
diff --git a/app/admin/users/ui.tsx b/app/admin/users/ui.tsx
index e8cab8b9..c9181998 100644
--- a/app/admin/users/ui.tsx
+++ b/app/admin/users/ui.tsx
@@ -92,7 +92,7 @@ export function Panel({
 
 export function Rows({ items }: { items: [string, React.ReactNode][] }) {
   return (
-    <dl className="grid gap-x-6 gap-y-2 text-sm sm:grid-cols-[9rem_1fr]">
+    <dl className="grid grid-cols-[6.5rem_1fr] gap-x-4 gap-y-1.5 text-sm sm:grid-cols-[9rem_1fr] sm:gap-x-6 sm:gap-y-2">
       {items.map(([label, value]) => (
         <div className="contents" key={label}>
           <dt className="font-semibold text-subtle">{label}</dt>

From b0ded7f317be33fe0101af208749e344f4d9c11c Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Wed, 16 Sep 2026 23:05:44 -0400
Subject: [PATCH 7/7] Fix washed-out modal backdrops in dark mode

bg-ink resolves to a light color in dark mode (it's the foreground/text
token, not a fixed dark shade), so the attachment preview, confirm
dialog and command palette overlays rendered as a bright, barely-dimmed
veil instead of darkening the page behind them. compose.tsx and the
event editor already had the right dark:bg-surface override; apply the
same fix to the other three.
---
 app/admin/ask.tsx                     | 2 +-
 app/admin/mail/attachment-preview.tsx | 2 +-
 app/admin/palette.tsx                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/admin/ask.tsx b/app/admin/ask.tsx
index 59cb3305..66f66ab5 100644
--- a/app/admin/ask.tsx
+++ b/app/admin/ask.tsx
@@ -62,7 +62,7 @@ export function AskHost() {
 
   return (
     <div
-      className="fixed inset-0 z-[60] flex animate-fade-in items-center justify-center bg-ink/40 px-4"
+      className="fixed inset-0 z-[60] flex animate-fade-in items-center justify-center bg-ink/40 px-4 dark:bg-surface/80"
       onMouseDown={(event) =>
         event.target === event.currentTarget && settle(null)
       }
diff --git a/app/admin/mail/attachment-preview.tsx b/app/admin/mail/attachment-preview.tsx
index 69ca6448..b03793ad 100644
--- a/app/admin/mail/attachment-preview.tsx
+++ b/app/admin/mail/attachment-preview.tsx
@@ -159,7 +159,7 @@ export function AttachmentPreview({
       role="dialog"
       aria-modal="true"
       aria-label={part.name ?? "Attachment preview"}
-      className="fixed inset-0 z-50 flex animate-fade-in flex-col bg-ink/80"
+      className="fixed inset-0 z-50 flex animate-fade-in flex-col bg-ink/80 dark:bg-surface/90"
       onMouseDown={(event) => event.target === event.currentTarget && onClose()}
     >
       <header className="flex shrink-0 items-center justify-between gap-3 px-5 pb-3 pt-[max(0.75rem,env(safe-area-inset-top))]">
diff --git a/app/admin/palette.tsx b/app/admin/palette.tsx
index ce39a30c..3e2afcf4 100644
--- a/app/admin/palette.tsx
+++ b/app/admin/palette.tsx
@@ -665,7 +665,7 @@ function Palette({
   return (
     <div
       onMouseDown={(event) => event.target === event.currentTarget && onClose()}
-      className="fixed inset-0 z-50 flex animate-fade-in justify-center bg-ink/40 sm:p-6 sm:pt-[11vh]"
+      className="fixed inset-0 z-50 flex animate-fade-in justify-center bg-ink/40 dark:bg-surface/80 sm:p-6 sm:pt-[11vh]"
     >
       <div
         role="dialog"