🐛 Bug: Long unbroken strings overflow containers and break layout

https://github.com/user-attachments/assets/2514e3cf-9779-431e-978a-f64643e05c76

Describe the bug

The UI does not properly handle long, unbroken strings such as URLs, hashes, JSON keys, or long schema field names. When this type of content is rendered, it can overflow its container and break the layout instead of wrapping or truncating correctly.

This issue is especially visible on smaller screens and in content-heavy or technical sections.

Steps To Reproduce

1. Render content containing a long unbroken string (e.g. a long URL or JSON key)
2. View the page on a narrow screen or mobile device
3. Observe the string overflowing its container and breaking the layout

Expected Behavior

Expected behavior

Long strings should wrap or truncate without breaking the layout.

Actual behavior

Long strings overflow their container, causing horizontal scrolling or layout breakage.

Screenshots

No response

Device Information [optional]

- OS:
- Browser:
- version:

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

Yes