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

未关闭 适合新手
  • 哪里不对？
#62,024 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
83/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
css, typescript
领域
frontend

调研方向

将 packages/console/app/src/routes/go/index.css 和 packages/console/app/src/routes/zen/index.css 中的 CTA 规则与 routes/index.css、brand、changelog 和 enterprise 中有效的规则进行比较。恢复 issue 中描述的 flex 对齐、8px 间距和不对称 padding。然后检查多个 locale 下 /go 和 /zen 的桌面端页眉，确认图标和标签能在 80px 高的页眉内显示在同一行。

由索引模型根据 Issue 内容生成。

描述

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.
主要语言
TypeScript
星标
224k
派生
30k
平均合并
6 小时 16 分钟
30 天内合并 PR
507

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

anomalyco/opencode 的其他 Issue

查看 anomalyco/opencode 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。