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

Aperta Adatta ai principianti
  • Qualcosa non va?
#62,024 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
83/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, typescript
Ambito
frontend

Direzione di ricerca

Confronta le regole CTA in packages/console/app/src/routes/go/index.css e packages/console/app/src/routes/zen/index.css con le regole funzionanti in routes/index.css, brand, changelog ed enterprise. Ripristina l’allineamento flex, la spaziatura di 8px e il padding asimmetrico descritti nell’issue. Poi controlla l’header desktop su /go e /zen in più locale per confermare che l’icona e l’etichetta stiano su una sola riga all’interno dell’header di 80px.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
TypeScript
Stelle
224k
Fork
30k
Merge medio
6h 16m
PR unite (30g)
507

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di anomalyco/opencode

Tutte le issue di anomalyco/opencode

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.