Misaligned Text Layout “Decentralized Compute” on ArcBlock Website
Affected Product: ArcBlock Official Website Page: https://www.arcblock.io/content/collections/en/compute Severity: 🟠 Medium Category: UI / Typography / Responsive Design
Summary
The text “Decentralized Compute” is visually broken into two lines (“Decentraliz” and “ed Compute”) instead of rendering as a single continuous phrase. This causes poor readability and disrupts the layout balance on the page.
Steps to Reproduce
- Open the page: https://www.arcblock.io/content/collections/en/compute
- View the page on desktop (Windows 11, Chrome 141.0.0.0).
- Scroll to the “Decentralized Compute” section under Blocklet Launcher / Blocklet Store.
Actual Result
❌ Text appears split incorrectly:
“Decentraliz” “ed Compute”
The break occurs mid-word instead of a natural line wrap.
Expected Result
✅ Text should render as:
“Decentralized Compute”
on a single line (or wrapped cleanly without breaking the word).
Possible Cause
- Incorrect CSS word-break or hyphenation rule applied (
word-break: break-alloroverflow-wrap: anywhere). - Responsive container width too narrow for the title element.
Suggested Fix
- Adjust CSS to prevent mid-word breaks:
javascript .title-text { word-break: normal; overflow-wrap: break-word; white-space: normal; } - Ensure container width is sufficient or use
min-widthfor large titles. - Test on different screen resolutions and dark/light modes.