The sign-up dialog's "See alternatives" link looks out of place, and is too small to tap on a phone

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

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

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

評価

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

調査の方向性

src/app/s/[slug]/commit-dialog.tsxを読み、リンクをsrc/app/s/[slug]/c/[id]/edit-form.tsxのセカンダリボタンと比較します。src/app/s/[slug]/slot-format.tsで、スマートフォンのタップターゲットに関する指針を確認します。リンクのスタイルだけを更新し、スマートフォン幅とデスクトップ幅でダイアログとボトムシートを確認します。セカンダリボタンと同じ見た目になり、スマートフォンで高さが44px以上あり、記載されたチェックに合格したら完了です。

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

説明

enhancement

What happens

When a slot fills while someone is signing up, the dialog shows "Sorry, this slot just filled up." / "Pick another slot." and, under them, a See alternatives link (CommitDialog in src/app/s/[slug]/commit-dialog.tsx).

The link is styled inline-block rounded bg-white px-2 py-1 underline and sits inside the red FormError box. The result is a small white chip with underlined red text: it reads as neither a button nor a plain link, and it doesn't match any other action on the participant pages.

  • It doesn't look like our buttons. Elsewhere on the participant pages, a secondary action in a red box is a bordered white button (rounded-lg border border-surface-sunk bg-white px-3 py-1.5 text-xs font-medium), like Keep in the cancel confirmation in src/app/s/[slug]/c/[id]/edit-form.tsx.
  • It's too small to tap. At text-xs with py-1 it's about 24px tall. The slot rows' actions are at least 44px on phones (min-h-11, see the comment in src/app/s/[slug]/slot-format.ts), and participants mostly arrive on phones.

Found while tophatting #806, which only changes when the link shows, not how it looks.

Fix, in outline

  • Style the link like the existing secondary button above (same classes, or a shared one if a second copy would appear), with max-sm:min-h-11 so it's a comfortable tap target on phones.
  • Keep it an <a href="/s/<slug>">, keep the words "See alternatives", and keep it inside the FormError box under the message.
  • Drop the wrapper div's space-y-1 if it no longer does anything (it has one child).

Watch for

  • Only the look changes. When the link shows (offersAlternatives, once #806 lands), where it goes and its text stay the same.
  • Related, maybe separate: clicking it just reloads the signup page. It doesn't point at the slots the server suggested, so the participant still has to find an open one themselves. Worth a look while here, but fine to split into its own issue.
  • Check it at phone width (390px) and desktop, in the bottom sheet as well as the dialog.

Done when

  • See alternatives looks like the other secondary buttons on the participant pages and is at least 44px tall on phones.
  • pnpm lint && pnpm format:check && pnpm typecheck && pnpm knip && pnpm test pass.
主要言語
TypeScript
スター
19
フォーク
4
平均マージ
19時間 15分
マージ済み PR（30日）
205

環境構築

はじめの一歩

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

richshaw/OpenSignup のほかの issue

richshaw/OpenSignup の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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