[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

About 2 months ago

Author

cryptotestnet

Subscribe to post

Get notified by email when there are changes.