Page MenuHomePhabricator

Pagination buttons overflow layout in mobile view on /campaigns/{id} page
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
Swayam_Agrahari
Nov 11 2025, 8:44 PM
Referenced Files
F71078908: image.png
Dec 15 2025, 12:23 PM
F71078891: image.png
Dec 15 2025, 12:23 PM
F71078904: image.png
Dec 15 2025, 12:23 PM
F71078894: image.png
Dec 15 2025, 12:23 PM
F70118264: screenshot-2025-11-12_02-08-01.png
Nov 11 2025, 8:44 PM

Description

Description:
On mobile screens, the pagination control for the list of contributors on /campaigns/{id} overflows its container, causing layout distortion and partial cutoff of the buttons.

This makes it difficult for users to navigate between contributor pages on smaller devices. The issue appears to be related to pagination width or lack of responsive wrapping within the table or list container.

Difficulty: Beginner

Domain: Coding

Steps to replicate the issue (include links if applicable):

  • Open any campaign page, e.g. /campaigns/123
  • Scroll down to the Top contributors list section
  • View the pagination area (bottom of the list)
  • Reduce browser width or open in a mobile device
  • Observe that the pagination buttons overflow outside their container

What happens?:

Pagination buttons overflow horizontally and break layout alignment on small screens.

What should have happened instead?:
Pagination buttons should:

  • Stay within container boundaries,
  • Wrap to a new line if space is limited, or
  • Collapse into a more compact mobile-friendly layout (e.g., smaller buttons or horizontal scroll).

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

  • Page: /campaigns/{id}
  • Component: Contributor list (pagination section)
  • Device: Mobile view / narrow viewport

screenshot-2025-11-12_02-08-01.png (435×361 px, 18 KB)

Note- Campaigns with atleast 4 pages of contributor's list should be used to reproduce this issue.

Event Timeline

UI/UX Enhancement: Improve Campaign Page Layout and User Experience

The campaign page has several UI/UX issues that affect user engagement and visual appeal:

  • Content is not properly structured with clear sections
  • Layout breaks on smaller screens
  • No interactive elements or animations
  • Mixed use of Bootstrap classes without a cohesive design
  • Also Top Contributors pagination shows incorrect ranking (always 1-10 on every page)

When viewing the Top Contributors table on campaign pages, the ranking always shows positions 1-10 regardless of the current page. On page 2, it should show ranks 11-20, on page 3 ranks 21-30, and so on, but currently it resets to 1-10 on every page.

@Swayam_Agrahari I'm making the PR with these fixes.

Hey @Gopavasanth thanks for the patch, the campaigns page looks really good but the task here was already assigned to someone else, so unassigning you here, but dont worry, I will create a new task for revaming the ui for campaigns page and link you patch there. Thanks for the great work : ))

Swayam_Agrahari assigned this task to Roger.
Swayam_Agrahari moved this task from Incoming Bugs to Merged on the ISA board.
Swayam_Agrahari added a subscriber: Roger.

Thanks for the patch @Roger , the patch fixes the pagination overflow.
Status: Accepted✅
Fix: Here