Skip to content

feat(playground): make named-layouts visually easier to identify - #296

Merged
Brooooooklyn merged 1 commit into
mainfrom
learning/layout-visibility
Aug 27, 2026
Merged

Brooooooklyn merged 1 commit into
mainfrom
learning/layout-visibility

Conversation

@mdong1909

Copy link
Copy Markdown
Contributor

Added horizontal CSS bars to make it easier for humans to see changes the named-layouts playground.

image

@mdong1909
mdong1909 requested a review from Brooooooklyn August 27, 2026 00:48

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d46ebad66d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

>
Layout
</header>
<main style={{ padding: 16 }}>{children}</main>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep composed layouts from nesting <main>

On /docs and /docs/ref, the integration routes compose this root layout with the Docs or API layout, each of which now adds another <main>. The resulting visible, nested main landmarks are invalid HTML and make landmark navigation ambiguous for screen-reader users; use a neutral wrapper for layout content or reserve <main> for only one level.

Useful? React with 👍 / 👎.

Comment on lines +9 to +10
background: '#FFCE1B',
color: '#ffffff',

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Increase the Docs header contrast

On /docs, the default 16px white label against #FFCE1B has a contrast ratio of approximately 1.49:1, far below the 4.5:1 threshold for normal-sized text. This makes the newly added layout identifier difficult to read for low-vision users and undermines the purpose of making layouts visually distinguishable; use substantially darker text or a darker background.

Useful? React with 👍 / 👎.

@Brooooooklyn
Brooooooklyn merged commit f901eb8 into main Aug 27, 2026
8 checks passed
@Brooooooklyn
Brooooooklyn deleted the learning/layout-visibility branch August 27, 2026 08:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants