[ECO Bounty] DePINscan DePIN News section – Article title and description text truncation/clipping on mobile

Description
In the "DePIN News" section, the article cards are experiencing text overflow issues where content is clipped or truncated, making it unreadable. Specifically:

  1. The article title appears to be missing the first character/word ("official validator..." instead of "An official validator..." or similar)

  2. The article description text is cut off mid-sentence ("we're build to high-quality..." and ending with "contributing t")

  3. Text appears to be overflowing its container or being clipped by CSS without proper ellipsis handling

Steps to Reproduce

  1. Navigate to https://depinscan.io on an Android mobile device

  2. Scroll down to the "DePIN News" section

  3. Observe the first news article (DataHive AI - "Stake SOL and Receive $DATA Airdrop!")

  4. Look at the title and description text below the banner image

Expected Result
• Article titles should display fully or truncate gracefully with "..."
• Article descriptions should be contained within the card boundaries with proper line wrapping or "Read more" functionality
• No text should be cut off mid-word or mid-sentence without indication

Actual Result
• Title appears clipped: "official validator of the Solana network" (missing beginning)
• Description text is abruptly cut off: "$DATA Points for Airdrop! At DataHive AI, we're build to high-quality, real-world data to train the next genere ways been to reward our community for contributing t"
• The text container appears to have insufficient width or height constraints, causing horizontal overflow or premature vertical clipping

Screenshot
(Attached – Orange arrow points to the truncated text area below the "Stake SOL and Receive $DATA Airdrop!" banner)

Suggested Fix
• Add overflow-wrap: break-word or word-wrap: break-word to article text containers
• Ensure article cards have adequate padding (padding-right) to prevent text touching the screen edge
• Implement line-clamp (e.g., -webkit-line-clamp: 3) with ellipsis for descriptions that exceed container height
• Check for fixed height constraints that might be cutting off content on smaller viewports

Severity / Priority
Medium – Content readability is significantly impacted, making news articles difficult to understand, but the main DePIN listing functionality remains usable.

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.