mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
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:
1 parent
da0c4eab9d
commit
4e5ce33c59
1 file changed
+4
-3
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user