Skip to content

enhancement: Add body scroll lock and top-right close button to README Badge Modal #275

Open

Description

@O2sa

In src/features/developer/components/user-profile-client.tsx, clicking 'Get README Badge' opens a modal dialog (badgeDialogOpen). When open, mouse wheel scrolling on the backdrop scrolls the underlying page. In addition, the modal only has a bottom 'Close' button without a standard top-right X close icon.

Motivation

Proper modal UX requires locking background scroll and offering an intuitive top-right dismissal button for accessibility and desktop/mobile usability.

Tasks

  • When badgeDialogOpen is true, set document.body.style.overflow = "hidden" (and restore on close/unmount).
  • Add an X icon button in the top-right corner of the dialog header with aria-label={t("profile.close")}.
  • Ensure clicking the X button closes the dialog.

Files to Check

  • src/features/developer/components/user-profile-client.tsx

Tip

🚀 Want to contribute?
Comment assign me to be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨

Activity

  1. Navid-007 commented on Oct 29, 2026

    @Navid-007

    assign me

  2. github-actions commented on Oct 29, 2026

    @github-actions

    🎉 Issue assigned to @Navid-007! Happy coding!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions