diff --git a/web/src/app/community/d/[id]/DeckDetailClient.tsx b/web/src/app/community/d/[id]/DeckDetailClient.tsx
index 84e7a8bb7..3450a70f9 100644
--- a/web/src/app/community/d/[id]/DeckDetailClient.tsx
+++ b/web/src/app/community/d/[id]/DeckDetailClient.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/lib/community/visibility";
 import { DESCRIPTION_MAX, TITLE_MAX } from "@/lib/community/validate";
 import { useDeviceHost } from "@/lib/community/deviceHost";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import { useZipDownload, zipStatusUrl } from "@/lib/community/zipDownload";
 import type { DeckPageItem } from "@/lib/community/server/serialize";
 import { captureEvent } from "@/lib/posthogEvents";
@@ -607,6 +608,7 @@ function PerformanceModal({
   const [json, setJson] = useState(initialJson ?? "");
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  const closeOnBackdrop = useBackdropClose(onClose);
 
   const send = async (value: string | null) => {
     setBusy(true);
@@ -643,7 +645,7 @@ function PerformanceModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div className={styles.modalCard} onClick={(event) => event.stopPropagation()}>
         <div className={styles.modalHeader}>
           <span>Deck performance</span>
@@ -715,6 +717,7 @@ function EditDeckModal({
   const [description, setDescription] = useState(initialDescription ?? "");
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  const closeOnBackdrop = useBackdropClose(onClose);
 
   const save = async () => {
     const trimmed = title.trim();
@@ -745,7 +748,7 @@ function EditDeckModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div className={styles.modalCard} onClick={(event) => event.stopPropagation()}>
         <div className={styles.modalHeader}>
           <span>Edit deck details</span>
diff --git a/web/src/components/community/AddHeaderModal.tsx b/web/src/components/community/AddHeaderModal.tsx
index 602d8f0b6..b1ca7d643 100644
--- a/web/src/components/community/AddHeaderModal.tsx
+++ b/web/src/components/community/AddHeaderModal.tsx
@@ -8,6 +8,7 @@ import { authClient } from "@/lib/community/auth-client";
 import { COMMUNITY_FETCH_INIT, communityApiUrl } from "@/lib/community/apiBase";
 import { useSubmitLatch } from "@/lib/community/submitLatch";
 import { useDialog } from "@/lib/hooks/useDialog";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import AuthModal from "./AuthModal";
 import styles from "./Community.module.css";
 
@@ -56,6 +57,7 @@ export default function AddHeaderModal({
   // One request per press, decided in the click's own tick (#455).
   const latch = useSubmitLatch();
   const cardRef = useDialog<HTMLDivElement>(onClose);
+  const closeOnBackdrop = useBackdropClose(onClose);
 
   const moderating = mode === "moderate" || mode === "moderate-port";
 
@@ -126,7 +128,7 @@ export default function AddHeaderModal({
             : "Add firmware header (.h)";
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div
         ref={cardRef}
         tabIndex={-1}
diff --git a/web/src/components/community/AddPerformanceModal.tsx b/web/src/components/community/AddPerformanceModal.tsx
index ee69ef786..b486ae6bd 100644
--- a/web/src/components/community/AddPerformanceModal.tsx
+++ b/web/src/components/community/AddPerformanceModal.tsx
@@ -7,6 +7,7 @@ import { authClient } from "@/lib/community/auth-client";
 import { COMMUNITY_FETCH_INIT, communityApiUrl } from "@/lib/community/apiBase";
 import { useSubmitLatch } from "@/lib/community/submitLatch";
 import { useDialog } from "@/lib/hooks/useDialog";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import { readPerformanceFile } from "@/lib/community/performanceFile";
 import AuthModal from "./AuthModal";
 import styles from "./Community.module.css";
@@ -34,6 +35,7 @@ export default function AddPerformanceModal({
   // One request per press, decided in the click's own tick (#455).
   const latch = useSubmitLatch();
   const cardRef = useDialog<HTMLDivElement>(onClose);
+  const closeOnBackdrop = useBackdropClose(onClose);
 
   // The Director saves .pfs and the panel plays it, so that is what people
   // have. It is decoded here into the canonical form the site stores, which
@@ -79,7 +81,7 @@ export default function AddPerformanceModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div
         ref={cardRef}
         tabIndex={-1}
diff --git a/web/src/components/community/AuthModal.tsx b/web/src/components/community/AuthModal.tsx
index f10f8edda..b2351ebbb 100644
--- a/web/src/components/community/AuthModal.tsx
+++ b/web/src/components/community/AuthModal.tsx
@@ -4,6 +4,7 @@ import { useState, type ReactNode } from "react";
 import { authClient, dummyEmailFor } from "@/lib/community/auth-client";
 import { PASSWORD_MIN, USERNAME_RE } from "@/lib/community/validate";
 import { useDialog } from "@/lib/hooks/useDialog";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import styles from "./Community.module.css";
 
 // Username + password auth. Email is an optional recovery field only — when
@@ -139,8 +140,9 @@ export default function AuthModal({ onClose, onAuthed, embedded = false }: Props
 // around the form owns both.
 function AuthWindow({ onClose, children }: { onClose: () => void; children: ReactNode }) {
   const cardRef = useDialog<HTMLDivElement>(onClose);
+  const closeOnBackdrop = useBackdropClose(onClose);
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div
         ref={cardRef}
         tabIndex={-1}
diff --git a/web/src/components/community/DeckPanel.tsx b/web/src/components/community/DeckPanel.tsx
index 4b38f6c4d..108ccb986 100644
--- a/web/src/components/community/DeckPanel.tsx
+++ b/web/src/components/community/DeckPanel.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/lib/community/deck";
 import { useDeviceHost } from "@/lib/community/deviceHost";
 import { useModuleBuild } from "@/lib/community/useModuleBuild";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import AuthModal from "./AuthModal";
 import ShareDeckModal from "./ShareDeckModal";
 import styles from "./Community.module.css";
@@ -92,6 +93,7 @@ export default function DeckPanel() {
     setNeedsAuth(false);
     setOpen(false);
   };
+  const closeOnBackdrop = useBackdropClose(close);
 
   // No builds configured (e.g. the Vercel mirror) → nothing here works.
   if (!buildsConfigured()) return null;
@@ -111,7 +113,7 @@ export default function DeckPanel() {
       </button>
 
       {open && (
-        <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={close}>
+        <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
           <div
             className={`${styles.modalCard} ${styles.modalCardWide}`}
             onClick={(event) => event.stopPropagation()}
diff --git a/web/src/components/community/EditDetailsModal.tsx b/web/src/components/community/EditDetailsModal.tsx
index 58203b2e8..6c5cf78d9 100644
--- a/web/src/components/community/EditDetailsModal.tsx
+++ b/web/src/components/community/EditDetailsModal.tsx
@@ -11,6 +11,7 @@ import {
 } from "@/lib/community/validate";
 import { LICENSE_OPTIONS, forkLicenseOptions, licenseBySpdx } from "@/lib/pattern/share";
 import { useDialog } from "@/lib/hooks/useDialog";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import { captureEvent } from "@/lib/posthogEvents";
 import { COMMUNITY_FETCH_INIT, communityApiUrl } from "@/lib/community/apiBase";
 import {
@@ -68,6 +69,7 @@ export default function EditDetailsModal({
   // before the hook could see which button opened the window, so the focus
   // had nowhere to go back to.
   const titleRef = useDialog<HTMLInputElement>(onClose);
+  const closeOnBackdrop = useBackdropClose(onClose);
 
   // What this pattern may be relicensed to. The pattern's CURRENT licence is
   // always included even when it is no longer offered (MIT, CC0): a retired
@@ -113,7 +115,7 @@ export default function EditDetailsModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div className={styles.modalCard} onClick={(event) => event.stopPropagation()}>
         <div className={styles.modalHeader}>
           <span>Edit pattern details</span>
diff --git a/web/src/components/community/PublishModal.tsx b/web/src/components/community/PublishModal.tsx
index 30dea52f4..573b5bdb8 100644
--- a/web/src/components/community/PublishModal.tsx
+++ b/web/src/components/community/PublishModal.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useDialog } from "@/lib/hooks/useDialog";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import { authClient } from "@/lib/community/auth-client";
 import { COMMUNITY_FETCH_INIT, communityApiUrl } from "@/lib/community/apiBase";
 import { useSubmitLatch } from "@/lib/community/submitLatch";
@@ -127,6 +128,7 @@ export default function PublishModal({
   // field's autoFocus used to move it before the hook could look, and the
   // field is not there yet while the session is being checked.
   const cardRef = useDialog<HTMLDivElement>(onClose);
+  const closeOnBackdrop = useBackdropClose(onClose);
   const titleRef = useRef<HTMLInputElement>(null);
   const formShown = !isPending && Boolean(session);
   useEffect(() => {
@@ -263,7 +265,7 @@ export default function PublishModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div
         ref={cardRef}
         tabIndex={-1}
diff --git a/web/src/components/community/ReportModal.tsx b/web/src/components/community/ReportModal.tsx
index 774011bb9..37c9e98e2 100644
--- a/web/src/components/community/ReportModal.tsx
+++ b/web/src/components/community/ReportModal.tsx
@@ -12,6 +12,7 @@ import {
   type ReportTargetType,
 } from "@/lib/community/validate";
 import { useDialog } from "@/lib/hooks/useDialog";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import { captureEvent } from "@/lib/posthogEvents";
 import AuthModal from "./AuthModal";
 import styles from "./Community.module.css";
@@ -41,6 +42,7 @@ export default function ReportModal({
   const latch = useSubmitLatch();
   const [sent, setSent] = useState(false);
   const cardRef = useDialog<HTMLDivElement>(onClose);
+  const closeOnBackdrop = useBackdropClose(onClose);
 
   const submit = async () => {
     if (!latch.take()) return;
@@ -69,7 +71,7 @@ export default function ReportModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div
         ref={cardRef}
         tabIndex={-1}
diff --git a/web/src/components/community/SendModuleModal.tsx b/web/src/components/community/SendModuleModal.tsx
index 88f9e8cc5..4b47c95bc 100644
--- a/web/src/components/community/SendModuleModal.tsx
+++ b/web/src/components/community/SendModuleModal.tsx
@@ -8,6 +8,7 @@ import { useDeviceHost } from "@/lib/community/deviceHost";
 import { captureEvent } from "@/lib/posthogEvents";
 import { useModuleBuild } from "@/lib/community/useModuleBuild";
 import { useZipDownload } from "@/lib/community/zipDownload";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import AuthModal from "./AuthModal";
 import { ZipInstallNote, ZipProgress } from "./ZipDownload";
 import styles from "./Community.module.css";
@@ -48,8 +49,9 @@ export default function SendModuleModal(
       }
   ),
 ) {
+  const closeOnBackdrop = useBackdropClose(props.onClose);
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={props.onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div
         className={`${styles.modalCard} ${styles.modalCardWide}`}
         onClick={(event) => event.stopPropagation()}
diff --git a/web/src/components/community/ShareDeckModal.tsx b/web/src/components/community/ShareDeckModal.tsx
index 7cb6ba4f4..7370dc4c2 100644
--- a/web/src/components/community/ShareDeckModal.tsx
+++ b/web/src/components/community/ShareDeckModal.tsx
@@ -7,6 +7,7 @@ import { COMMUNITY_FETCH_INIT, communityApiUrl } from "@/lib/community/apiBase";
 import { useSubmitLatch } from "@/lib/community/submitLatch";
 import { PUBLIC_DECKS_MAX, type CollectedPattern } from "@/lib/community/deck";
 import { DESCRIPTION_MAX, TITLE_MAX } from "@/lib/community/validate";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import {
   VISIBILITY_HINTS,
   VISIBILITY_LABELS,
@@ -40,6 +41,7 @@ export default function ShareDeckModal({
   const [busy, setBusy] = useState(false);
   // One request per press, decided in the click's own tick (#455).
   const latch = useSubmitLatch();
+  const closeOnBackdrop = useBackdropClose(onClose);
 
   const share = async () => {
     const trimmed = title.trim();
@@ -83,7 +85,7 @@ export default function ShareDeckModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div className={styles.modalCard} onClick={(event) => event.stopPropagation()}>
         <div className={styles.modalHeader}>
           <span>Share deck</span>
diff --git a/web/src/components/community/ShareDeckPackModal.tsx b/web/src/components/community/ShareDeckPackModal.tsx
index 08e5c8f4e..3bad92ae3 100644
--- a/web/src/components/community/ShareDeckPackModal.tsx
+++ b/web/src/components/community/ShareDeckPackModal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
 import styles from "./Community.module.css";
 
 // Handing a deck to somebody.
@@ -39,6 +40,7 @@ export default function ShareDeckPackModal({
 }) {
   const [copied, setCopied] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const closeOnBackdrop = useBackdropClose(onClose);
 
   // Escape closes it. This one is a thing you glance at and leave, so it had
   // the key before the form windows took it from lib/hooks/useDialog.
@@ -62,7 +64,7 @@ export default function ShareDeckPackModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" onClick={onClose}>
+    <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
       <div className={styles.modalCard} onClick={(event) => event.stopPropagation()}>
         <div className={styles.modalHeader}>
           <span className={styles.modalKicker}>Share</span>
diff --git a/web/src/components/community/backdropClose.test.tsx b/web/src/components/community/backdropClose.test.tsx
new file mode 100644
index 000000000..c5d00fa17
--- /dev/null
+++ b/web/src/components/community/backdropClose.test.tsx
@@ -0,0 +1,202 @@
+// The community windows closed on any click that reached their backdrop. Drag
+// across the text in a card and let go outside, and Chromium sends the click
+// to the backdrop, the element the press and the release share. Edit details
+// closed that way under a half-written description, and opened again empty.
+// Pattern Lab's windows have read where the press began since
+// useBackdropClose, and these twelve now do too.
+//
+// Each case opens its window the way its page does, presses in the card's
+// first text field (or on the card, where it has none) and lets go on the
+// backdrop.
+
+import { useState, type ReactNode } from "react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import DeckDetailClient, { type DeckView } from "@/app/community/d/[id]/DeckDetailClient";
+import AddHeaderModal from "./AddHeaderModal";
+import AddPerformanceModal from "./AddPerformanceModal";
+import AuthModal from "./AuthModal";
+import DeckPanel from "./DeckPanel";
+import EditDetailsModal from "./EditDetailsModal";
+import PublishModal from "./PublishModal";
+import ReportModal from "./ReportModal";
+import SendModuleModal from "./SendModuleModal";
+import ShareDeckModal from "./ShareDeckModal";
+import ShareDeckPackModal from "./ShareDeckPackModal";
+
+vi.mock("next/navigation", () => ({ useRouter: () => ({ refresh: vi.fn(), push: vi.fn() }) }));
+vi.mock("@/lib/community/auth-client", () => ({
+  authClient: {
+    useSession: () => ({ data: { user: { id: "u1", name: "Tester" } }, isPending: false }),
+  },
+  dummyEmailFor: (name: string) => `${name}@example.invalid`,
+}));
+vi.mock("@/lib/posthogEvents", () => ({ captureEvent: vi.fn() }));
+
+beforeEach(() => {
+  // The deck chip only shows where builds are on, as on the Pi.
+  vi.stubEnv("NEXT_PUBLIC_BUILD_ENABLED", "1");
+  // Send starts its build as it opens. Nothing here waits for the answer.
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(() => new Promise<Response>(() => {})),
+  );
+});
+
+afterEach(() => {
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  window.localStorage.clear();
+});
+
+function Page({ dialog }: { dialog: (close: () => void) => ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open
+      </button>
+      {open && dialog(() => setOpen(false))}
+    </>
+  );
+}
+
+const opened = (dialog: (close: () => void) => ReactNode) => () => {
+  render(<Page dialog={dialog} />);
+  fireEvent.click(screen.getByText("Open"));
+};
+
+const DECK: DeckView = {
+  id: "d1",
+  title: "Night set",
+  description: null,
+  visibility: "public",
+  hiddenAt: null,
+  performanceJson: null,
+  createdAt: "2026-10-01T00:00:00.000Z",
+  username: "tester",
+  displayUsername: "Tester",
+};
+
+const onDeckPage = (button: string) => () => {
+  render(<DeckDetailClient deck={DECK} items={[]} isOwner />);
+  fireEvent.click(screen.getByRole("button", { name: button }));
+};
+
+const WINDOWS: [string, () => void][] = [
+  [
+    "Share to Community",
+    opened((close) => (
+      <PublishModal
+        code="export function draw(display) {}"
+        parentId={null}
+        parentTitle={null}
+        initialTitle="Wave"
+        onClose={close}
+      />
+    )),
+  ],
+  [
+    "Edit details",
+    opened((close) => (
+      <EditDetailsModal
+        patternId="p1"
+        initialTitle="Wave"
+        initialDescription={null}
+        initialLicense="CC-BY-SA-4.0"
+        initialMadeOn={null}
+        initialMadeHow={null}
+        initialVisibility="public"
+        onClose={close}
+      />
+    )),
+  ],
+  [
+    "report",
+    opened((close) => (
+      <ReportModal targetType="pattern" targetId="p1" targetLabel="Wave" onClose={close} />
+    )),
+  ],
+  [
+    "Add firmware header",
+    opened((close) => <AddHeaderModal patternId="p1" initialCpp={null} onClose={close} />),
+  ],
+  [
+    "Publish a performance",
+    opened((close) => <AddPerformanceModal patternId="p1" onClose={close} />),
+  ],
+  [
+    "Share deck",
+    opened((close) => (
+      <ShareDeckModal
+        deck={[{ patternId: "p1", title: "Wave", code: "// wave" }]}
+        onClose={close}
+      />
+    )),
+  ],
+  [
+    "Share this deck",
+    opened((close) => (
+      <ShareDeckPackModal
+        packUrl="https://patternflow.work/api/community/decks/d1/zip"
+        installUrl={null}
+        onCopyLink={async () => true}
+        onDownload={() => {}}
+        onClose={close}
+      />
+    )),
+  ],
+  ["sign-in", opened((close) => <AuthModal onClose={close} />)],
+  [
+    "Send to my Patternflow",
+    opened((close) => <SendModuleModal patternTitle="Wave" code="// wave" onClose={close} />),
+  ],
+  [
+    "Deck",
+    () => {
+      render(<DeckPanel />);
+      fireEvent.click(screen.getByTitle(/^Your deck \(/));
+    },
+  ],
+  ["Edit deck details", onDeckPage("Edit details")],
+  ["Deck performance", onDeckPage("Attach performance")],
+];
+
+// Where a drag that ends outside begins: the first field, or the card.
+function insideCard(backdrop: HTMLElement): Element {
+  const field = within(backdrop).queryAllByRole("textbox")[0];
+  const card = backdrop.firstElementChild;
+  if (!card) throw new Error("the window has no card");
+  return field ?? card;
+}
+
+describe.each(WINDOWS)("the %s window", (_name, mount) => {
+  it("closes on a press that goes down and comes up on the backdrop", () => {
+    mount();
+    const backdrop = screen.getByRole("dialog");
+    fireEvent.pointerDown(backdrop);
+    fireEvent.click(backdrop);
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("stays open when a drag from inside the card lets go on the backdrop", () => {
+    mount();
+    const backdrop = screen.getByRole("dialog");
+    fireEvent.pointerDown(insideCard(backdrop));
+    fireEvent.click(backdrop);
+    expect(screen.getByRole("dialog")).toBe(backdrop);
+  });
+});
+
+describe("community windows", () => {
+  it("Edit details keeps a description that a drag out of it let go outside", () => {
+    WINDOWS[1][1]();
+    const description = screen.getByRole("textbox", { name: "Description" });
+    fireEvent.change(description, { target: { value: "Two waves that cross" } });
+    fireEvent.pointerDown(description);
+    fireEvent.click(screen.getByRole("dialog"));
+    expect(screen.getByRole("textbox", { name: "Description" })).toHaveValue(
+      "Two waves that cross",
+    );
+  });
+});