[ghozzza]

Description

Styles the claim page's info cards and the code samples on /keys, and puts a way back to the faucet in the header. No copy, API, auth or claim-flow changes.

• Code samples on /keys. A new CodeBlock (components/code-block.tsx) gives the three snippets a bordered block in the secondary background, with a Copy button. Long lines scroll inside the block and never wrap, so the curl command and the status URL stay intact. The status snippet used whitespace-pre-wrap break-all and now scrolls like the others. Inline code gets its own small boxed style in globals.css, so 401 invalid_api_key no longer reads as prose.
• Header. A "Faucet" link sits next to "For Agents" and follows the network the header is given. The current page carries aria-current="page" and is highlighted in the brand colour. On a phone the nav takes its own row under the logo, because two links, sign-in and the toggle do not fit beside it in 375px.
• Way back from /keys. The footer link and the header both read one KEYS_NETWORK constant. Keys are Celo Sepolia only, so that is the page's network.
• Card width. The claim card and the keys card both use max-w-lg.
• Info cards. Headings are heavier, with a bar under them in the brand colour (yellow in light mode, lilac in dark). The bar sits under the text, so headings keep their contrast in both themes. Body text is capped at 70ch instead of 30ch, and the gap between heading and body is tighter.

Other changes

• A real overflow the issue didn't list. /keys was 613px wide on a 375px screen, light and dark, measured on master. The grid's minmax(25%, auto) / 1fr columns took a long code line's width as their minimum. Columns are now minmax(0, 1fr) shares of a grid capped at 80rem, and cards get min-width: 0. This also makes the grid the same width on both pages.
• The issue's guess about overflow above 1600px did not reproduce. /celo-sepolia at 1920px had no horizontal overflow on master, and it has none now.

Tested

• yarn --cwd apps/web test:ci: 228 passed, 8 of them new (tests/faucet-ui.test.ts, plus two in tests/faucet-header.test.ts). Like the existing header test they assert the source, since there is no DOM test setup. Run against master, all 8 fail and the 5 existing header tests still pass.
• yarn lint, tsc --noEmit, next build and prettier on the touched files are clean.
• Horizontal overflow, measured as scrollWidth > clientWidth with Playwright on production builds (next build && next start) of master and this branch, both pages, light and dark, at 375, 1024, 1440 and 1920. master has 2 of 16 (/keys at 375, light and dark). This branch has 0 of 16.
• Before and after, full page, from the same production builds. All 16 images are in Drive.

page	width	theme	before	after
/celo-sepolia	375	light	before	after
/celo-sepolia	375	dark	before	after
/celo-sepolia	1440	light	before	after
/celo-sepolia	1440	dark	before	after
/keys	375	light	before	after
/keys	375	dark	before	after
/keys	1440	light	before	after
/keys	1440	dark	before	after

Not tested here: the signed-in state of /keys (key list, fresh-key box), since that needs a GitHub OAuth app. Those elements are unchanged apart from inheriting the inline code style for the fresh key.

Open questions from the issue, answered

• Design direction. No Figma was available, so this stays inside the site's own tokens (--main, --secondary-background, --border, the 2px borders and offset shadows) rather than introducing new colours.
• Copy button. Added. The snippets exist to be pasted, and copying a multi-line curl by hand is where a trailing backslash gets dropped.
• One PR or two. One. The grid and card fixes are shared by both pages.

Related issues

• Fixes Faucet web UI: style the claim-page cards and the For Agents page (code blocks, back navigation, card width) #303

Backwards compatibility

Styling and markup only. No API, route or data change.

Documentation

None needed.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
faucet	Ready	Preview	Oct 30, 2026 3:39pm UTC

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-30T14:09:27.185786Z	fc660b9	PR opened

ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[ghozzza]

Checked on the Vercel preview (https://faucet-git-ghozzza-303-faucet-cards-and-code-c-labs.vercel.app), with the same Playwright measurement as the body. /celo-sepolia and /keys, light and dark, at 375, 1024, 1440 and 1920 give 0 of 16 with horizontal overflow, including 1920 as the issue asks.