[ECO Bounty] UI Layout Misalignment on IoTeX Blogs Page

App/Website: IoTeX Blogs (iotex.io)

Device: iPhone XR (Mobile View)

OS Version: iOS 18.7.3

Category: UX / Product Improvement Ideas

Wallet Address: io1tkw393kejmxwnd454twc6020sxcyvh5dxqmren

Description

On the IoTeX Blogs "Evaluation Criteria" page, there is a significant UI rendering bug within the rewards table. The word "Suggestion" and the accompanying orange bullet icon are misaligned, causing the text to overlap with the vertical border and the adjacent column title ("UX / Product Improvement Ideas").

Steps to Reproduce

1. Open Safari or any mobile browser on an iPhone XR.

2. Navigate to the IoTeX Blogs section containing the "Evaluation Criteria" and rewards table.

3. Scroll down to the table depicting reward tiers (e.g., $10 – $100).

4. Observe the first column under the "UX / Product Improvement Ideas" row.

Expected Result

The text "Suggestion" should be properly padded and contained within its own column without overlapping the column dividers or adjacent text.

Actual Result

The text is pushed to the right, bleeding into the next cell and creating a cluttered, unreadable "Suggestidmprovement" string. This suggests a CSS flexbox or fixed-width table cell conflict on smaller mobile breakpoints.

Impact

• Readability: Users cannot clearly read the category labels.

• Professionalism: Misaligned tables on official documentation pages can reduce user trust in the platform’s attention to detail.