From da0c4eab9dffa7679e84a230d8c0bb6245f864ee Mon Sep 17 00:00:00 2001
From: Shane <o@shaneermitano.com>
Date: Wed, 1 Jul 2026 19:59:19 -0500
Subject: [PATCH] fix(og-generator): actually vertically center the preview row
 + info panel labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous round's items-start fix aligned the two cards relative to EACH
OTHER (proven equal, but only proves top===center===bottom trivially) — it
never addressed the real complaint: the whole OG+Thumb row sat pinned near
the top of the canvas with dead space below on wide/tall screens. Wrapped the
row in a flex-1 container that centers it (@4xl:items-center
@4xl:justify-center) within the space remaining below the view toggle. Since
flex items don't shrink below their content size, an overflowing row still
just grows the wrapper rather than clipping (avoids the classic
flex-center-clips-on-overflow bug). Verified via getBoundingClientRect: 186.1px
of space above and below the row, exactly equal.

OG info panel: prefixed "Headline:" at the start, moved the fit-mode
indicator to right after the font size and reworded it to "(auto on)" (shown
only when auto-fit is active), and prefixed "WCAG:" before the contrast
score. Reads as "Headline: 64px (auto on) · 2 lines · WCAG: 16.3:1 AAA".

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

diff --git a/apps/og-generator/app/page.tsx b/apps/og-generator/app/page.tsx
index 48314cedf5a..54cbbecc3c0 100644
--- a/apps/og-generator/app/page.tsx
+++ b/apps/og-generator/app/page.tsx
@@ -555,11 +555,15 @@ export default function Page() {
           backgroundSize: '16px 16px',
         }}
       >
-        {/* view toggle */}
+        {/* view toggle — stays pinned near the top */}
         <div className="mb-5 flex w-full items-center justify-center">
           <Segmented value={view} onChange={setView} options={VIEW_OPTS} />
         </div>
 
+        {/* 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">
             {showOg && (
               <div className="min-w-0 @4xl:flex-1">
@@ -579,16 +583,17 @@ export default function Page() {
                   <div className="flex flex-col gap-2">
                     {og.fit && (
                       <div className="flex flex-wrap items-center gap-x-2 gap-y-1 self-start rounded-full border border-default bg-background px-3 py-1 text-xs text-foreground-light shadow-sm">
-                        <span className="text-foreground">{og.fit.fontSize}px</span>
+                        <span className="font-medium text-foreground">Headline:</span>
+                        <span className="text-foreground">
+                          {og.fit.fontSize}px{og.fit.mode === 'auto' ? ' (auto on)' : ''}
+                        </span>
                         <span className="text-foreground-lighter">·</span>
                         <span>
                           {og.fit.lineCount} {og.fit.lineCount === 1 ? 'line' : 'lines'}
                         </span>
                         <span className="text-foreground-lighter">·</span>
-                        <span>{og.fit.mode}</span>
-                        <span className="text-foreground-lighter">·</span>
                         <span className={headlineRating === 'Fail' ? 'text-destructive-600' : 'text-brand'}>
-                          {headlineContrast.toFixed(1)}:1 {headlineRating}
+                          WCAG: {headlineContrast.toFixed(1)}:1 {headlineRating}
                         </span>
                       </div>
                     )}
@@ -636,6 +641,7 @@ export default function Page() {
               </div>
             )}
           </div>
+        </div>
       </main>
 
       {/* Floating tool panel — packaged top bar + all controls, docked right.