fix: og image fix for collections

app/api/og/collection/[id]/route.tsx

@@ -76,6 +76,10 @@ export async function GET(
 
     return new ImageResponse(
       (
+        // Root carries NO padding — absolutely-positioned children measure
+        // from the padding box, so any root padding would inset the full-bleed
+        // cover image and leave the bg colour showing as a strip. Padding lives
+        // on the inner content layer instead.
         <div
           style={{
             width: 1200,
@@ -85,7 +89,6 @@ export async function GET(
             backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
             fontFamily: "Noto Sans, sans-serif",
             position: "relative",
-            padding: 80,
           }}
         >
           {hasImage ? (
@@ -119,6 +122,17 @@ export async function GET(
             </>
           ) : null}
 
+          {/* Content layer — holds the padding so the bg image stays full-bleed. */}
+          <div
+            style={{
+              position: "relative",
+              zIndex: 1,
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              padding: 80,
+            }}
+          >
             {/* Eyebrow */}
             <div
               style={{
@@ -128,7 +142,6 @@ export async function GET(
                 letterSpacing: 6,
                 textTransform: "uppercase",
                 color: accent,
-              zIndex: 1,
               }}
             >
               Collection
@@ -145,7 +158,6 @@ export async function GET(
                 marginTop: 24,
                 maxHeight: 320,
                 overflow: "hidden",
-              zIndex: 1,
               }}
             >
               {title}
@@ -161,7 +173,6 @@ export async function GET(
                   marginTop: 24,
                   maxHeight: 120,
                   overflow: "hidden",
-                zIndex: 1,
                 }}
               >
                 {description}
@@ -177,7 +188,6 @@ export async function GET(
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "space-between",
-              zIndex: 1,
               }}
             >
               <div style={{ fontSize: 24, color: textSecondary, display: "flex" }}>
@@ -188,6 +198,7 @@ export async function GET(
               </div>
             </div>
           </div>
+        </div>
       ),
       {
         width: 1200,

app/api/og/post/[id]/route.tsx

@@ -102,7 +102,6 @@ export async function GET(
             backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
             fontFamily: "Noto Sans, sans-serif",
             position: "relative",
-            padding: 80,
           }}
         >
           {/* Background image + dimming overlay */}
@@ -138,6 +137,19 @@ export async function GET(
             </>
           ) : null}
 
+          {/* Content layer — holds the padding so the bg image stays
+              full-bleed (absolute children measure from the padding box, so
+              padding on the root would inset the image and show a strip). */}
+          <div
+            style={{
+              position: "relative",
+              zIndex: 1,
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              padding: 80,
+            }}
+          >
           {/* Caption — the centrepiece */}
           <div
             style={{
@@ -255,6 +267,7 @@ export async function GET(
             </div>
           </div>
           </div>
+        </div>
       ),
       {
         width: 1200,

components/social/post/post-card-menu.tsx

@@ -152,9 +152,12 @@ export function PostCardMenu({
   // Copy the post's caption + source citation + a (short) link to the post —
   // the same payload the share sheet / footer produce. Available to every
   // viewer.
-  async function copyCaption() {
+  // Build the copy payload — caption + citation + a short link to the post.
-    setOpen(false);
+  // The short link is a network round-trip, so we must NOT await it before
-    try {
+  // touching the clipboard or we lose the click's transient user activation
+  // (the write then fails on the first click and only lands on the second,
+  // once the link is cached). See `useCopyFeedback` for the same fix.
+  async function buildCaptionText(): Promise<string> {
     const origin = window.location.origin;
     let url = "";
     if (authorHandle) {
@@ -170,11 +173,39 @@ export function PostCardMenu({
     lines.push("Source:", ref.title);
     if (ref.detail) lines.push(ref.detail);
     if (url) lines.push(url);
-      await navigator.clipboard.writeText(lines.join("\n"));
+    return lines.join("\n");
+  }
+
+  function copyCaption() {
+    setOpen(false);
+    // Hand the clipboard a *Promise* of the text via ClipboardItem so the
+    // browser keeps the gesture alive while the short link resolves — one
+    // click copies cleanly.
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      try {
+        const item = new ClipboardItem({
+          "text/plain": buildCaptionText().then(
+            (s) => new Blob([s], { type: "text/plain" }),
+          ),
+        });
+        navigator.clipboard.write([item]).then(
+          () => toast.success("Caption copied"),
+          () => toast.error("Could not copy"),
+        );
+        return;
+      } catch {
+        // ClipboardItem-with-promise unsupported → fall through to the
+        // await + writeText path below.
+      }
+    }
+    void buildCaptionText().then(async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
         toast.success("Caption copied");
       } catch {
         toast.error("Could not copy");
       }
+    });
   }
 
   // Build the items list AFTER all hooks have run so a conditional