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

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

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
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 分钟
30 天内合并 PR
205

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

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

richshaw/OpenSignup 的其他 Issue

查看 richshaw/OpenSignup 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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