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

Client: AlertDialog renders beneath Dialog/Sheet (z-50 vs z-1001)

Open Beginner friendly
#4,580 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

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

Research direction

Start in packages/client/src/components/ui/alert-dialog.tsx and compare its overlay and content layers with packages/client/src/components/ui/dialog.tsx and sheet.tsx. Check the delete-template confirmation and the message-delete confirmation from #4578, then remove the local z-1002 override there. Done means AlertDialog overlays and content appear above Dialog and Sheet and remain clickable.

Written by the indexing model from the issue text.

Description

packages/client/src/components/ui/alert-dialog.tsx puts its overlay and content at z-50. dialog.tsx and sheet.tsx use z-1001. So an AlertDialog opened from inside a Dialog or Sheet renders underneath it, and can't be seen or clicked.

Examples

  • The delete-template confirmation opened from the dynamic report's Template Manager dialog (dialogs/delete-template-confirmation.tsx).
  • The message-delete confirmation in the new dynamic report discussion sheet (#4578). That PR works around the problem locally with className="z-1002" on the content, but the overlay still sits under the sheet.

Suggested fix

Raise the AlertDialog overlay and content in the shared primitive to the same layer as Dialog/Sheet (z-1001, or one above), and drop the local override in #4578.

Dominant language
TypeScript
Stars
30
Forks
8
Avg merge
2d 9h
Merged PRs (30d)
202

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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 Urigo/accounter-fullstack

All issues in Urigo/accounter-fullstack

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.