[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
Open a mobile browser (Chrome/Android).
Navigate to
https://hub.iotex.io/delegate.Scroll down to the "Requirements to become a Validator" section.
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-widthfor the text element or a fixedflex-basisfor 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
Log in to comment and vote
No comments yet
Be the first to share your thoughts.