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

Fix vertical overlap of Quick Actions buttons when wrapped on narrow screens

Closed Beginner friendly
#152 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
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, node.js
Domain
frontend

Research direction

Start in the admin console’s /admin/ view and locate the Quick Actions button container and #dungeonQuickActions. Check how the buttons wrap at narrow widths, then apply the proposed flex wrapping and spacing and make the dungeon buttons participate in that layout. Done when buttons have clear row and column separation across screen widths.

Written by the indexing model from the issue text.

Description

Problem

In the admin console (/admin), the Quick Actions buttons wrap onto multiple rows when the viewport or console width is not wide enough. Because the button container does not use a flex layout with vertical gap spacing, the wrapped buttons vertically overlap each other.

Proposed Solution
  • Change the Quick Actions button container to a flex container with wrapping and gap (\d-flex flex-wrap gap-2 mb-3).
  • Set #dungeonQuickActions\ to \display: contents\ so the Chatacombs dungeon buttons participate seamlessly in the parent flex layout without breaking wrap behavior.
  • Ensure buttons have clean row and column separation on all screen widths.
Dominant language
JavaScript
Stars
5
Forks
2
Avg merge
11h 45m
Merged PRs (30d)
14

Getting set up

  • Ships a Dockerfile or Docker Compose file
  • No pull request template
  • No contributing guide

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.

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.