Skip to main content

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