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

オープン 初心者向け
  • 何か問題がありますか？
#62,024 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
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 を復元します。その後、複数のロケールで /go と /zen のデスクトップヘッダーを確認し、アイコンとラベルが 80px のヘッダー内で 1 行に収まることを確かめます。

索引モデルが 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分
マージ済み PR（30日）
507

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

anomalyco/opencode のほかの issue

anomalyco/opencode の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。