Fix Long URLs and Unbroken Text Without Hiding Overflow

.log-value {
  overflow-wrap: normal;
}

.log-value {
  overflow-wrap: anywhere;
}

Root cause

Text normally wraps at language-defined opportunities such as spaces. A generated identifier can contain no usable opportunity at all. Its min-content contribution then reflects the complete uninterrupted token, which may be much wider than a phone viewport.

The fixture uses an invented build identifier with no personal or production data. The failing state keeps the normal wrapping rule; the fixed state permits an emergency break only when the token cannot otherwise fit.

Test representative content extremes

Do not validate this rule with a short placeholder. Use the longest safe examples the field can actually receive: generated filenames, hashes, URLs with long path segments, translated labels, and user-provided identifiers after any server-side limits. Compare the value’s bounding rectangle with its content box at 320 CSS pixels and at increased text zoom. The complete text must remain present in the DOM, selectable, and visible after wrapping.

Place the emergency wrapping rule on the field that owns continuous values rather than on every paragraph in the application. That keeps normal language readable and makes the exception easy to audit. It also exposes cases where a neighboring icon, fixed column, or flex minimum is the real remaining constraint.

When this fix is not enough

Do not apply aggressive breaking to every paragraph. Human-language content should retain normal word boundaries, and values that must be copied exactly should remain selectable and complete. word-break: break-all may be appropriate for a deliberately compact identifier column, but it is usually less readable for general prose.

Regression condition

At 320 and 375 CSS pixels, the failing fixture must create positive page-level overflow. The fixed fixture must report zero page-level overflow, and the complete identifier must remain present and selectable inside its content box.