Skip to main content

Toast wraps unbreakable long words (WEB-1350)

Version: 0.9.1 ยท Type: ๐Ÿ› Bug Fix

WEB-1350

Problemโ€‹

A Toast whose text contains a long token with no natural break opportunity โ€” typically a file name such as ๅทฒๅฐ† "320X240(1)_rmv8_904kbps_15fps_rma_44100hz_96.5kbps" ็งปๅŠจ่‡ณ "cccc" โ€” overflowed its line box, so the file name visually collided with the text around it.

Root causeโ€‹

TOAST_TITLE_CLASS and TOAST_DESCRIPTION_CLASS relied on the CSS default overflow-wrap: normal, which only breaks at whitespace and CJK boundaries. An underscore is not a break opportunity, so the whole file name is a single unbreakable word: the CJK parts wrapped normally while the long token could neither break nor be contained. The text wrappers (TOAST_CONTENT_CLASS / TOAST_BODY_CLASS) carry min-w-0, which lets them shrink narrower than that word, and the root node is w-fit max-w-[420px], so the toast cannot grow to absorb it either.

Changed Filesโ€‹

  • packages/design/src/components/Toast/styles.ts
  • packages/design/src/components/Toast/__tests__/Toast.test.tsx

Changesโ€‹

  1. styles.ts: add wrap-anywhere (overflow-wrap: anywhere) to TOAST_TITLE_CLASS and TOAST_DESCRIPTION_CLASS.
  2. Toast.test.tsx: add a unit test rendering a long file name as both title and description, asserting the two text nodes carry wrap-anywhere.

Why wrap-anywhere and not break-words / break-allโ€‹

  • break-words (overflow-wrap: break-word) does not contribute break opportunities to min-content sizing. The container still derives its intrinsic width from the unbreakable word, and under w-fit + min-w-0 it shrinks below that width and overflows anyway. anywhere counts the break opportunities toward intrinsic sizing, so the container correctly shrinks within 420px and then wraps.
  • break-all would also split ordinary English words mid-word, which reads poorly in mixed CJK / Latin copy.

Impactโ€‹

  • Toast copy containing long file names, URLs or tokens now wraps within 420px instead of overflowing.
  • Regular copy is unchanged โ€” anywhere only takes effect when no other break opportunity exists.