www: Download CTA wraps and overflows header on /go and /zen

Open Beginner friendly
  • Is something wrong?
#62,024 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
83/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, typescript
Domain
frontend

Research direction

Compare the CTA rules in packages/console/app/src/routes/go/index.css and packages/console/app/src/routes/zen/index.css with the working rules in routes/index.css, brand, changelog, and enterprise. Restore the flex alignment, 8px gap, and asymmetric padding described in the issue, then inspect the desktop header on /go and /zen in multiple locales to confirm the icon and label fit on one line within the 80px header.

Written by the indexing model from the issue text.

Description

reproduced

Summary

On the Go and Zen pages (/go, /zen, all locales) the desktop header's "Download" CTA is laid out as an inline link instead of a flex button. The icon and label wrap onto two lines and the button overflows the 80px header, overlapping its bottom border.

Environment

  • URL: https://opencode.ai/de/go (also /go, /zen, other locales)
  • Browser: Chrome 156.0.8078.80, 1470x956 CSS px, 2x DPR, dark color scheme
  • OS: macOS 27.0.1 (arm64)
  • opencode version: v2.2.5
  • Terminal: N/A (website issue)
  • Install/channel: latest
  • Active plugins: opencode-antigravity-auth@latest

Reproduction

  1. Open https://opencode.ai/de/go on a desktop viewport (e.g. 1470x956) in dark mode.
  2. Look at the top-right "Download" button in the header.
  3. The same happens on https://opencode.ai/de/zen. No interaction or resize is required.

Expected Behavior

A single-line pill with the 18px download icon, an 8px gap, and the "Download" label; 40px tall and vertically centered inside the 80px header, as on https://opencode.ai/de.

Actual Behavior

The anchor computes to display: inline, gap: normal, padding: 8px 16px, height: 78px. The SVG and the label are split into two line boxes, the CTA touches the top edge of the header and covers the header's bottom border. The text is still clickable.

Root Cause

packages/console/app/src/routes/go/index.css and packages/console/app/src/routes/zen/index.css contain a stale copy of the header CTA rule:

[data-slot="cta-button"] {
  background: var(--color-background-strong);
  color: var(--color-text-inverted);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

The route CSS used by working pages (packages/console/app/src/routes/index.css, brand, changelog, enterprise) additionally has display: flex; align-items: center; gap: 8px; and padding: 8px 16px 8px 10px. Because every route ships its own copy of the header CSS, only /go and /zen break.

Additional Context

  • Screenshot: broken Download CTA in the header
  • Injecting the missing declarations (display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px) on the live page makes the button render correctly.
  • download/index.css has the same stale rule, but no CTA is rendered on /download.
  • Suggest moving the shared header/nav CSS into one place so route copies cannot drift.
Dominant language
TypeScript
Stars
224k
Forks
30k
Avg merge
6h 16m
Merged PRs (30d)
507

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from anomalyco/opencode

All issues in anomalyco/opencode

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.