Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[web] Buttons show the default arrow cursor on hover (Tailwind v4 dropped the preflight `cursor: pointer`)

Open Beginner friendly
  • Is something wrong?
#594 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@xbsheng is already working on this.

Since Oct 12, 2026.

  • #595 by @xbsheng — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, tailwindcss
Domain
frontend

Research direction

Start in web/src/app/globals.css and check how the project uses Tailwind CSS v4; the issue also points to disabled controls in step-controls.tsx and simulator-controls.tsx. Restore pointer behavior for enabled buttons and [role="button"] elements while preserving the default cursor for disabled buttons. Done when enabled controls show a pointer and disabled controls do not.

Written by the indexing model from the issue text.

Description

Problem

Hovering the locale switcher (EN / 中文 / 日本語) and the dark-mode toggle in the header shows the default arrow cursor instead of a pointer. The nav links (Timeline / Compare / Layers) and the GitHub icon on the same row are fine.

This is not limited to the header: every <button> in web/ behaves the same way — Compare/Diff tabs, the simulator and per-session playback controls, the Design Decisions collapsible, etc.

Cause

web/ is on Tailwind CSS v4. The v3 preflight included button, [role="button"] { cursor: pointer }; v4 dropped it, so <button> falls back to the browser's UA default cursor: default. <a> elements (nav links, GitHub icon) still get cursor: pointer from the UA stylesheet — which is exactly why one row of the header looks inconsistent.

Verifiable in the production bundle: the only cursor declaration in /_next/static/chunks/0b4b0328131d73a8.css is .cursor-pointer, used exactly once (web/src/app/[locale]/page.tsx:219).

Suggested fix

Restore the rule once in web/src/app/globals.css instead of adding cursor-pointer to every button:

button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

:not(:disabled) matters because step-controls.tsx and simulator-controls.tsx have disabled buttons, and those should keep the default cursor.

Environment
Dominant language
Python
Stars
78.2k
Forks
12.5k
Avg merge
3h 27m
Merged PRs (30d)
2

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from shareAI-lab/learn-claude-code

All issues in shareAI-lab/learn-claude-code

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.