[Eco Bounty] IoTex Hub UI Overlap / Incorrect Icon Alignment on Mobile

Platform: Mobile Web (Android/Chrome)

URL: hub.iotex.io/delegate

Status: Beta (as indicated by the site banner) Severity: Low (Visual/UI Polish)


1. Description

On the "Requirements to become a Validator" page, there is a layout inconsistency in the card displaying technical requirements. Specifically, for the "Provide Technical knowledge" card, the logic icon ($[/>]$) is overlapping with or positioned too close to the text, causing the word "knowledge" to be pushed to a new line and creating uneven padding within the list.

2. Steps to Reproduce

  1. Open a mobile browser (Chrome/Android).

  2. Navigate to https://hub.iotex.io/delegate.

  3. Scroll down to the "Requirements to become a Validator" section.

  4. Compare the "Provide Technical knowledge" card to the cards above it (e.g., "Register a Validator Profile").

3. Expected Result

All cards in the list should have a consistent height, text alignment, and icon placement. Icons should be vertically centered and have fixed right-side padding that does not interfere with the text wrapping.

4. Actual Result

  • The "Provide Technical knowledge" card expands vertically more than the others.

  • The icon is positioned in a way that forces "knowledge" to wrap prematurely.

  • There is lack of horizontal breathing room between the text and the icon compared to the "Register" or "Infrastructure" cards.

5. Technical Observations

  • Flexbox/Grid Alignment: The container for this specific list item likely lacks a min-width for the text element or a fixed flex-basis for the icon container.

  • Typography: The longer text string in this card is breaking the layout consistency of the 4-card stack.


Recommendation: Adjust the CSS for the list items to use display: flex; justify-content: space-between; align-items: center;. Ensure the text has sufficient padding-right to avoid colliding with the icon container on narrow mobile viewports.

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

13 days ago

Author

cryptotestnet

Subscribe to post

Get notified by email when there are changes.