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,72 +122,80 @@ export async function GET(
             </>
           ) : null}
 
-          {/* Eyebrow */}
+          {/* Content layer — holds the padding so the bg image stays full-bleed. */}
           <div
             style={{
-              display: "flex",
-              fontSize: 24,
-              fontWeight: 700,
-              letterSpacing: 6,
-              textTransform: "uppercase",
-              color: accent,
+              position: "relative",
               zIndex: 1,
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              padding: 80,
             }}
           >
-            Collection
-          </div>
-
-          {/* Title — the centrepiece */}
-          <div
-            style={{
-              display: "flex",
-              fontSize: title.length > 48 ? 60 : 76,
-              fontWeight: 700,
-              color: textPrimary,
-              lineHeight: 1.15,
-              marginTop: 24,
-              maxHeight: 320,
-              overflow: "hidden",
-              zIndex: 1,
-            }}
-          >
-            {title}
-          </div>
-
-          {description ? (
+            {/* Eyebrow */}
             <div
               style={{
                 display: "flex",
-                fontSize: 28,
-                color: textSecondary,
-                lineHeight: 1.4,
-                marginTop: 24,
-                maxHeight: 120,
-                overflow: "hidden",
-                zIndex: 1,
+                fontSize: 24,
+                fontWeight: 700,
+                letterSpacing: 6,
+                textTransform: "uppercase",
+                color: accent,
               }}
             >
-              {description}
+              Collection
             </div>
-          ) : null}
 
-          <div style={{ flex: 1, display: "flex" }} />
-
-          {/* Footer: count + branding */}
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-              zIndex: 1,
-            }}
-          >
-            <div style={{ fontSize: 24, color: textSecondary, display: "flex" }}>
-              {count}
+            {/* Title — the centrepiece */}
+            <div
+              style={{
+                display: "flex",
+                fontSize: title.length > 48 ? 60 : 76,
+                fontWeight: 700,
+                color: textPrimary,
+                lineHeight: 1.15,
+                marginTop: 24,
+                maxHeight: 320,
+                overflow: "hidden",
+              }}
+            >
+              {title}
             </div>
-            <div style={{ fontSize: 22, color: accent, fontWeight: 700 }}>
-              prabhupadasays.org
+
+            {description ? (
+              <div
+                style={{
+                  display: "flex",
+                  fontSize: 28,
+                  color: textSecondary,
+                  lineHeight: 1.4,
+                  marginTop: 24,
+                  maxHeight: 120,
+                  overflow: "hidden",
+                }}
+              >
+                {description}
+              </div>
+            ) : null}
+
+            <div style={{ flex: 1, display: "flex" }} />
+
+            {/* Footer: count + branding */}
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <div style={{ fontSize: 24, color: textSecondary, display: "flex" }}>
+                {count}
+              </div>
+              <div style={{ fontSize: 22, color: accent, fontWeight: 700 }}>
+                prabhupadasays.org
+              </div>
             </div>
           </div>
         </div>

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={{
@@ -254,6 +266,7 @@ export async function GET(
               prabhupadasays.org
             </div>
           </div>
+          </div>
         </div>
       ),
       {