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

[Bug]: Compact PR header merge button gives no visible cue that it needs a second click

Closed Beginner friendly
  • Is something wrong?
#17,944 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

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

Research direction

Read apps/web and inspect PullRequestDetailPanel.tsx, focusing on the merge and auto-merge buttons and their compact header styling. Reproduce the issue with a narrow PR detail panel and check how each button changes after the first click. Done means the armed state is visibly distinct in icon-only form for both buttons; the issue names no test file.

Written by the indexing model from the issue text.

Description

Before submitting
  • I searched existing issues and did not find a duplicate.
  • I included enough detail to reproduce or investigate the problem.
Area

apps/web

Steps to reproduce
  1. Open a mergeable pull request in the PR detail panel.
  2. Make the panel narrow enough that the header buttons collapse to icon only (@max-[30rem]/pr-header).
  3. Click the header Merge button (or Enable auto-merge) once.
Expected behavior

The button visibly shows that it is armed and a second click will merge, even in its icon-only form.

Actual behavior

Since #17710, the first click arms the button and the only visible change is the label switching to "Confirm merge?" / "Confirm auto-merge?". In the compact header that label is hidden (@max-[30rem]/pr-header:hidden in PullRequestDetailPanel.tsx), so the button looks unchanged. Apart from the hover tooltip, nothing tells you a second click is needed, and the armed state expires after 3 seconds. The first click looks like it did nothing.

Approve workflows and the menu items are not affected because their labels never hide.

Impact

Minor bug or occasional failure

Version or commit

main @ 1f093d119b (#17710) and later

Proposed fix

Show the armed state in a way that survives the icon-only form. For example, swap the merge glyph for a confirm icon (e.g. CheckIcon) while armed, alongside the existing label change. Revert already switches to the destructive variant when armed, which would be another option. The change is limited to those two buttons in PullRequestDetailPanel.tsx. I'm happy to open a PR once the direction is approved.

Dominant language
TypeScript
Stars
24.8k
Forks
6.4k
Avg merge
6h 53m
Merged PRs (30d)
222

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

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 pingdotgg/t3code

All issues in pingdotgg/t3code

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.