Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

On a phone, a signup's page has two links called "Settings" that go to different places

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

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

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

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
76/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
next.js, playwright, react, typescript
領域
accessibility, frontend

調査の方向性

src/app/app/(chrome)/layout.tsxから始め、ヘッダーリンクが狭い画面向けのラベルと翻訳エントリをどのように選ぶかを追ってください。次に、tests/e2e/help/connect-an-ai-assistant.spec.tsとヘルプページの文章を読み、電話画面用のラベルとそのチェックを更新し、sm以上ではメールアドレスを維持してください。390px幅のヘッダーにAccountと表示され、/app/settingsが開き、登録タブがSettingsのままであれば完了です。

索引モデルが issue の本文から書いたものです。

説明

enhancement pipeline:proposed pipeline:ux

Needs your OK: this renames the account link in the header on a phone, from "Settings" to "Account". Swap pipeline:proposed for pipeline:ready to have it built.

What happens

On a phone, a signup's page shows "Settings" twice, one above the other:

  • The account's, in the header. src/app/app/(chrome)/layout.tsx shows the organizer's email there from sm up. Below sm the address doesn't fit, so the link says "Settings". It opens /app/settings, where Connected apps lives.
  • The signup's, in the tab bar. TabsNav (src/components/signup/TabsNav.tsx) has Build, Responses and Settings. That Settings opens the signup's own settings, such as whether people must give an email.

They lead to different places with the same name. An organizer after the signup's settings can tap the header one and land on Connected apps. On a computer the header shows the email, so the clash only happens below sm (640px).

The header's "Settings" was a deliberate choice when the settings page came in (#225): the comment in the layout says the address won't fit on narrow screens. The signup's Settings tab was already there.

To see it: create a signup and open it at 390px wide. The header reads "Help Settings Sign out". The tabs under the title read "Build Responses Settings".

Fix, in outline

  • Call the header link "Account" on a phone. Change its narrow-screen text in (chrome)/layout.tsx from "Settings" to "Account".
  • Leave the rest of the link alone. It still shows the email from sm up, and its title stays "Settings".
  • Leave the page and the tab alone. /app/settings keeps its "Settings" heading and crumb. The signup's Settings tab keeps its name.

Watch for

  • Help page. connect-an-ai-assistant says "On a phone, it says Settings" and uses UI.settings for both the link and the page heading. Add a separate UI entry for the link, and update the text.
  • e2e tests.
    • tests/e2e/help/connect-an-ai-assistant.spec.ts, "the header link says Settings", clicks the link by that name at 390px.
    • tests/e2e/organizer.spec.ts finds it with getByTitle('Settings'), which still works if the title stays.
    • tests/e2e/oauth-consent.spec.ts finds it by href, with a comment that names "Settings". Update the comment.
  • docs/connect-ai-assistant.md says to click your email address to open Settings. That's the computer's header, so it stays true.
  • CHANGELOG: add a line under Unreleased › Changed.

Choices this makes

  • "Account", not an icon. The header's other items are words (Help, Sign out), and "Account" fits where "Settings" did.
  • Rename the header link, not the tab. "Signup settings" in the tab bar would make it scroll on a phone. The header link already changes its words by screen size.
  • The page keeps the name "Settings". Under its heading it says "Signed in as …", so it reads as the account's. Renaming it would change the crumb, the page title, the help page and the docs on a computer too, for a clash that only exists on a phone.

Done when

  • At 390px wide, the header link reads "Account" and opens /app/settings. From sm up it still shows the email.
  • An e2e check at 390px on a signup's page finds the tab named "Settings" and no link named "Settings". (The tabs have role="tab", so the header link is the only link that could match.)
  • The help page and its phone e2e say "Account".
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

Found by the UX walkthrough (scenario O4) on 2026-10-24, and checked against the code on main at 4ed27a9.

Generated by Claude Code

主要言語
TypeScript
スター
19
フォーク
4
平均マージ
19時間 34分
マージ済み PR（30日）
165

環境構築

はじめの一歩

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

richshaw/OpenSignup のほかの issue

richshaw/OpenSignup の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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