fix: ui fix

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

@@ -3,7 +3,7 @@
 /**
  * OG card for a single post.
  *
- * Renders a 1200×630 image with:
+ * Renders a 1200×1200 (square) image with:
  *
  *   • The post caption (the quote) as the visual centrepiece, in
  *     serif-toned weight so it reads as a passage rather than UI chrome.
@@ -96,7 +96,7 @@ export async function GET(
         <div
           style={{
             width: 1200,
-            height: 630,
+            height: 1200,
             display: "flex",
             flexDirection: "column",
             backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
@@ -111,13 +111,13 @@ export async function GET(
                 alt=""
                 src={bgImageUrl}
                 width={1200}
-                height={630}
+                height={1200}
                 style={{
                   position: "absolute",
                   top: 0,
                   left: 0,
                   width: 1200,
-                  height: 630,
+                  height: 1200,
                   objectFit: "cover",
                   filter: "brightness(0.45)",
                 }}
@@ -129,7 +129,7 @@ export async function GET(
                   top: 0,
                   left: 0,
                   width: 1200,
-                  height: 630,
+                  height: 1200,
                   background:
                     "linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1))",
                 }}
@@ -147,19 +147,19 @@ export async function GET(
               flex: 1,
               display: "flex",
               flexDirection: "column",
-              padding: 80,
+              padding: 96,
             }}
           >
           {/* Caption — the centrepiece */}
           <div
             style={{
               display: "flex",
-              fontSize: displayCaption.length > 160 ? 36 : 44,
+              fontSize: displayCaption.length > 180 ? 42 : 52,
               fontWeight: 700,
               color: textPrimary,
-              lineHeight: 1.35,
-              marginTop: 20,
-              maxHeight: 380,
+              lineHeight: 1.4,
+              marginTop: 24,
+              maxHeight: 720,
               overflow: "hidden",
               zIndex: 1,
             }}
@@ -175,8 +175,9 @@ export async function GET(
               fontWeight: 700,
               color: textSecondary,
               letterSpacing: 4,
+              lineHeight: 1.35,
               textTransform: "uppercase",
-              marginTop: 28,
+              marginTop: 36,
               zIndex: 1,
             }}
           >
@@ -193,6 +194,7 @@ export async function GET(
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "space-between",
+              marginTop: 48,
               zIndex: 1,
             }}
           >
@@ -271,7 +273,7 @@ export async function GET(
       ),
       {
         width: 1200,
-        height: 630,
+        height: 1200,
         fonts: [
           {
             name: "Noto Sans",