[ECO Bounty] iopay Pagination UI Glitch – Empty/Clipped "Previous" Button on Page 1

πŸ“ Description

In the Discover β†’ DePINscan news feed, the pagination component at the bottom of the article list displays a UI anomaly when on the first page.

As indicated by the orange arrow in the screenshot:

  • There is a partially visible, dark grey button fragment to the left of the active page "1" button.

  • This appears to be a "Previous" (<) arrow button that is incorrectly rendered, clipped, or not properly hidden despite being on the first page of results.


πŸ” Steps to Reproduce

  1. Open the ioPay mobile app.

  2. Navigate to Discover β†’ DePINscan.

  3. Scroll to the bottom of the first page of news articles.

  4. Observe the pagination bar (numbers 1, 2, 3, etc.).

  5. Result: An empty or clipped button box appears to the left of the number "1".


βœ… Expected Behavior

  • When on Page 1, the "Previous" (<) button should either be completely hidden or clearly disabled (visible but inactive/greyed out).

  • The pagination bar should be centered or properly aligned without orphaned UI fragments on the edges.


❌ Actual Behavior

  • A glitched UI sliver/box appears at the start of the pagination row.

  • It creates an asymmetrical and broken look for the navigation component.

πŸ’‘ Suggested Fix

  • Total Removal: Use a strict conditional statement to ensure the "Previous" button element is not rendered at all when currentPage === 1.

  • UI Consistency: Ensure the "Previous" and "Next" buttons have fixed dimensions and proper spacing that accounts for the screen edge.

Wallet Address: io1tkw393kejmxwnd454twc6020sxcyvh5dxqmren

Device & Environment:

-Operating system: Android 13

-Device model: Redmi Note 10 Pro

Please authenticate to join the conversation.

Upvoters
Status

In Review

Board
πŸ’‘

New Issue

Date

About 3 hours ago

Author

cryptotestnet

Subscribe to post

Get notified by email when there are changes.