[ECO Bounty] ioTexScan UI Overflow and Text Wrapping on Mobile Dashboard

Site: iotexscan.io Platform: Mobile Web (Android / Chrome) Severity: Low (Visual/UI Polish)

Description: Multiple dashboard cards on the main landing page exhibit layout issues and text overflow when viewed on mobile screens. Large numbers and card titles are wrapping awkwardly, making the data difficult to read.

Specific Issues Observed:

  1. Blocks Card: The block height number (e.g., 45,025,893) is too large for the container, causing the last digit to wrap to a new line.

  2. Progress of Epoch Card: The title "Progress of Epoch" is wrapping mid-word ("Ep-och"), which breaks the card's visual alignment.

Steps to Reproduce:

  1. Open Chrome on an Android device.

  2. Navigate to https://iotexscan.io/.

  3. Scroll to the statistics dashboard section.

  4. Observe the "Blocks" and "Progress of Epoch" cards.

Expected Behavior: The UI should be responsive. Large numbers should either scale down in font size (fluid typography) or the card containers should expand to prevent single-digit wrapping. Titles should have enough padding/width to prevent mid-word breaks.

Actual Behavior: Large numerical values and titles are wrapping onto new lines, breaking the grid layout and aesthetic (see orange arrow in screenshot).

Suggested Fix:

  • Implement overflow-wrap: normal or adjust the font-size for the .card-value classes on mobile breakpoints.

  • Increase the container height or decrease font size for the "Progress of Epoch" title.

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

3 days ago

Author

cryptotestnet

Subscribe to post

Get notified by email when there are changes.