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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#62,024 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
83/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, typescript
Área
frontend

Línea de trabajo

Compara las reglas de CTA en packages/console/app/src/routes/go/index.css y packages/console/app/src/routes/zen/index.css con las reglas que funcionan en routes/index.css, brand, changelog y enterprise. Restaura la alineación flex, el espacio de 8px y el padding asimétrico descritos en el issue. Después, inspecciona el encabezado de escritorio en /go y /zen en varios locales para confirmar que el icono y la etiqueta caben en una sola línea dentro del encabezado de 80px.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
224k
Forks
30k
Merge medio
6 h 16 min
PR fusionados (30 d)
507

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de anomalyco/opencode

Todos los issues de anomalyco/opencode

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.