From 4e5ce33c59e951b6dc04bf153f2101596ba00a10 Mon Sep 17 00:00:00 2001
From: Shane <o@shaneermitano.com>
Date: Wed, 1 Jul 2026 20:03:10 -0500
Subject: [PATCH] fix(og-generator): match WCAG: label styling to Headline:,
 narrow preview to 65%

- Split "WCAG:" into its own font-medium text-foreground span, matching
  "Headline:" (previously the whole segment, including the label, was
  colored by pass/fail state)
- Preview row: w-full -> w-[65%], with the wrapper's horizontal centering
  made unconditional (was @4xl-only) so the narrower row stays centered in
  both stacked and side-by-side layouts. Verified via getBoundingClientRect:
  exactly 65.0% of the canvas's usable width, with equal left/right margins
  (225.4px each) at 1700px.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/og-generator/app/page.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/og-generator/app/page.tsx b/apps/og-generator/app/page.tsx
index 54cbbecc3c0..2c1316405ab 100644
--- a/apps/og-generator/app/page.tsx
+++ b/apps/og-generator/app/page.tsx
@@ -563,8 +563,8 @@ export default function Page() {
         {/* Fills the remaining canvas height; on wide/side-by-side screens the
             row centers within it. (flex-1 items don't shrink below their
             content, so this can't clip an overflowing row — it just grows.) */}
-        <div className="flex w-full flex-1 flex-col @4xl:items-center @4xl:justify-center">
-          <div className="flex w-full flex-col gap-6 @4xl:flex-row @4xl:items-start">
+        <div className="flex w-full flex-1 flex-col items-center @4xl:justify-center">
+          <div className="flex w-[65%] flex-col gap-6 @4xl:flex-row @4xl:items-start">
             {showOg && (
               <div className="min-w-0 @4xl:flex-1">
                 <PreviewCard
@@ -592,8 +592,9 @@ export default function Page() {
                           {og.fit.lineCount} {og.fit.lineCount === 1 ? 'line' : 'lines'}
                         </span>
                         <span className="text-foreground-lighter">·</span>
+                        <span className="font-medium text-foreground">WCAG:</span>
                         <span className={headlineRating === 'Fail' ? 'text-destructive-600' : 'text-brand'}>
-                          WCAG: {headlineContrast.toFixed(1)}:1 {headlineRating}
+                          {headlineContrast.toFixed(1)}:1 {headlineRating}
                         </span>
                       </div>
                     )}