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>
This commit is contained in:
ShaneandClaude Opus 4.8 committed 2026-07-01 20:03:10 -05:00
1 parent da0c4eab9d
commit 4e5ce33c59
1 file changed
+4 -3
+4 -3
View File
@@ -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>
)}