Skip to main content
ArcBlock Community

Misaligned Text Layout “Decentralized Compute” on ArcBlock Website

JM “cryptotestnet” Morales
Support
qualifiedrewardedux

image.png

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

  1. Open the page: https://www.arcblock.io/content/collections/en/compute
  2. View the page on desktop (Windows 11, Chrome 141.0.0.0).
  3. 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-all or overflow-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-width for large titles.
  • Test on different screen resolutions and dark/light modes.
Reply