[ECO Bounty] iopay ioTex Hub Floating Action Button (FAB) Overlapping Pagination

Summary

On the IoTeX Hub (Beta) website, the floating "Feedback" megaphone button is positioned directly over the pagination controls. In the ioPay mobile browser, this makes it difficult or impossible for users to click on the final page numbers or the "next" arrow, as the floating button blocks the touch target.

Affected URL

https://hub.iotex.io/ (viewed via ioPay Browser)

Steps to Reproduce

  1. Open the ioPay wallet app.

  2. Navigate to the Discover or Browser tab.

  3. Go to the IoTeX Hub website.

  4. Scroll to the bottom of the project list to reach the pagination section (Page 1, 2, 3... 18).

  5. Observe the position of the megaphone feedback icon in the bottom right corner.

Expected Behavior

The floating feedback button should be positioned so that it does not overlap essential navigation elements like the page numbers or the "Next" button. Ideally, it should have enough padding to sit below or to the side of the pagination bar.

Actual Behavior

The megaphone button floats directly on top of the right side of the pagination bar (overlapping the "next" arrow and potentially page 18). This prevents the user from navigating through the project list effectively.

Environment

  • App: ioPay Wallet Browser

  • Site: IoTeX Hub (Beta)

  • Device: Android (based on system navigation buttons)

Visual Evidence

See the attached screenshot: The orange arrow points to the floating megaphone icon which is clearly obstructing the pagination controls at the bottom of the screen.

Suggested Fix

  1. Increase Z-index or Padding: Adjust the CSS for the feedback button to add more bottom margin or "bottom" offset on mobile views.

  2. Move Position: Relocate the FAB slightly higher or further to the right to clear the pagination container.

  3. Hide on Scroll: Alternatively, hide the feedback button when the user reaches the very bottom of the page where the pagination is located.

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

7 days ago

Author

cryptotestnet

Subscribe to post

Get notified by email when there are changes.