From fae1aa2b05572a095c81ca7c8a7b966fa2dad0f4 Mon Sep 17 00:00:00 2001
From: Garrett Mills <shout@garrettmills.dev>
Date: Sun, 25 Oct 2026 14:23:48 -0500
Subject: [PATCH] Card preview: clicking empty space beside the info tile
 closes it

---
 src/components.tsx | 11 +++++++++--
 src/styles.css     |  9 ++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components.tsx b/src/components.tsx
index 1c0f7dd..dc0e141 100644
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -1364,6 +1364,7 @@ function ClickPreviewModal({
   const shownImage = showBack && hasBack ? card.back_image_uri : card.image_uri;
   const backdropRef = useRef<HTMLDivElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
+  const facesRef = useRef<HTMLDivElement>(null);
   const infoRef = useRef<HTMLDivElement>(null);
   // Compact mode: when the full layout (art + info tile) would be taller than
   // the viewport — i.e. on phones, where the tile wraps below the art — show
@@ -1441,9 +1442,15 @@ function ClickPreviewModal({
         ]
           .filter(Boolean)
           .join(" ")}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          // The modal's box spans the tallest child, so beside a short info
+          // tile (or between side-by-side DFC faces) there's empty space that
+          // is still "off the card" — treat a click there like the backdrop.
+          if (e.target === e.currentTarget || e.target === facesRef.current) onClose();
+        }}
       >
-        <div className="preview-modal-faces">
+        <div className="preview-modal-faces" ref={facesRef}>
           {/* Only the front face can be horizontal (Battles) — a transformed
               Battle's back face is always a normal, correctly-oriented
               creature card, per `CardRef.horizontal`'s doc comment. */}
diff --git a/src/styles.css b/src/styles.css
index 4c300a2..a2ef2a0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2100,7 +2100,10 @@ tbody tr:hover {
 .preview-modal {
   position: relative;
   margin: auto;
-  cursor: default;
+  /* Its empty space (e.g. below a short info tile) closes the modal like the
+     backdrop does — see ClickPreviewModal — so only the actual content gets
+     the default cursor. */
+  cursor: zoom-out;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -2111,6 +2114,10 @@ tbody tr:hover {
 .preview-modal-faces {
   position: relative;
 }
+.preview-modal > :not(.preview-modal-faces),
+.preview-modal-faces > * {
+  cursor: default;
+}
 /* Sized explicitly (Scryfall "normal" images are 488x680) rather than from
    the image's intrinsic size, so the box is already its final size before the
    image loads — ClickPreviewModal measures the layout on mount to decide on