Skip to content

Mobile Responsiveness Issues Across Miner Details Page #1341

Description

@carlh7777

What problem does this solve?

Several sections of the Miner Details page do not adapt correctly to mobile viewports, causing controls and statistics to wrap, overlap, or become difficult to use.

On narrow screens, the page header, per-repository standings controls, repository card statistics, and Pull Requests filters all experience layout issues that reduce usability and make the interface harder to navigate.

Current Behavior

Header

  • Back button, mode toggle, and watchlist star wrap onto multiple rows.
  • Header actions become visually disconnected.

Per-Repository Standings Controls

  • Sort controls become cramped on mobile.
  • The "Sort:" label consumes valuable horizontal space.
  • Sort dropdown, direction toggle, and view toggle do not fit comfortably within the available width.

Pull Requests Filters

  • Filter buttons (All, Open, Merged, Closed) wrap or overlap.
  • Controls may span multiple rows depending on viewport width.

Expected Behavior

Header

  • Back button and watchlist star remain aligned on a single row.
  • OSS Contributions / Issue Discovery toggle is displayed on a separate row beneath the header actions.
  • No wrapping or overlapping occurs.

Per-Repository Standings Controls

  • Sort controls remain fully usable on mobile.
  • "Sort:" label is hidden on smaller screens to reduce width usage.
  • Controls stay on a single row and support horizontal scrolling when necessary.

Pull Requests Filters

  • Filter buttons remain on a single row.
  • Horizontal scrolling is available when controls exceed the viewport width.
  • No overlapping or multi-line wrapping occurs.

Steps to Reproduce

  1. Open the Miner Details page on a mobile device or narrow browser window (~390px width).
  2. Observe the page header.
  3. Navigate to the Per-repository standings section.
  4. Review the sort controls and repository cards.
  5. Switch to the Pull Requests tab.
  6. Observe the status filter controls.

Screenshots

Header Layout

Image

Per-Repository Standings Controls

Image

Pull Requests Filters

Image

Environment

  • OS: Windows 11
  • Browser: Chrome
  • Screen Width: 360px

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions