Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

A slot row's hover toolbar covers its "0 of N taken" count

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

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
1-2 天
新手友好度
52/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
playwright, react, typescript
领域
frontend, testing

调研方向

Start with src/components/build-wysiwyg/WysiwygSlot.tsx and trace how hover, focus, and the interactive state control the toolbar. Then inspect the existing Playwright setup and tests/e2e/slot-row-layout.spec.ts as a suggested example; verify the count and toolbar do not overlap at 1280 and 390 widths, including a tagged row from #581. Done means the layout check passes, rows at rest stay unchanged, and the listed lint, typecheck, knip, and test commands pass.

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

描述

bug pipeline:proposed pipeline:ux

Needs your OK: this moves a slot row's count aside while its Edit, Duplicate and Delete buttons show, so both stay visible. Swap pipeline:proposed for pipeline:ready to have it built.

What happens

On the Build tab, a closed slot row (WysiwygSlot in src/components/build-wysiwyg/WysiwygSlot.tsx) shows its count, such as "0 of 6 taken", at its right edge. Hover the row, or tab into it, and a toolbar with Edit, Duplicate and Delete appears at the same right edge. The toolbar is absolutely placed (right-2 top-1.5) on a white background, so it hides the count. The count is what organizers come to that row for, and it disappears whenever the pointer rests on it.

On a computer this happens on every hover. With the keyboard, it happens on every row that focus passes through.

To see it: at a computer width, create a signup with two slots, and hover either row.

Fix, in outline

  • Move the count aside while the toolbar shows. When the row is hovered or has focus, give the row's button right padding the width of the toolbar, so the count slides left to sit just before it. The summary text gives up the room; it already truncates.
  • Rows at rest don't change, and no row gets taller.
  • Pin it in a browser. Add a Playwright check like tests/e2e/slot-row-layout.spec.ts, which does this for the public page: on hover and on focus, the count's box and the toolbar's box don't overlap, at 1280 and 390 wide. jsdom has no layout, so a unit test can't catch it.

Watch for

  • Phones. There's no hover, but the toolbar shows when the row has focus. Check 390 wide.
  • #581 adds a "Still says TBD" tag to the row and lets its first line wrap on a phone. Check a tagged row too. Whichever lands second has a small merge in WysiwygSlot.tsx.
  • The toolbar's inert switch (the interactive state) must still follow hover and focus.
  • CHANGELOG entry.

Choices this makes

  • Move the count, or always keep room for the toolbar. Default: move the count only while the toolbar shows. Keeping the toolbar's room free on every row would cut every summary short, most of all on a phone, for a toolbar that's hidden most of the time. The cost is that the count slides left on hover.
  • The toolbar stays a hover toolbar, in the same place, with the same buttons. Default: yes.

Done when

  • Hovering or focusing a slot row shows its toolbar and its count side by side, at 1280 and 390 wide, checked by Playwright.
  • A row at rest looks as it does now.
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass, and the new e2e check passes.

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

Generated by Claude Code

主要语言
TypeScript
星标
19
派生
4
平均合并
21 小时 3 分钟
30 天内合并 PR
176

环境准备

  • 提供 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 摘要。