twenty

Files

T

Aleksa Jankovic 0b31d2a6a0 fix(front): wrap long note/markdown text on mobile browsers (#21909 )

Fixes #21929

### Issue

When viewing/reading a note's body (BlockNote rich-text / markdown
content) on Android, long text overflows horizontally off the viewport
in **Chrome** and **Firefox**, while it wraps correctly on **iOS
Safari**.

### Root cause

The note body is rendered by the BlockNote editor (`StyledEditor` in
`BlockEditor.tsx`). The block/inline content had no `overflow-wrap`, and
the flex-based `.bn-block-content` had no `min-width` constraint. WebKit
(iOS Safari) breaks the content, but Blink (Android Chrome) and Gecko
(Android Firefox) keep the intrinsic *min-content* width of the flex
children, so the container expands past the viewport instead of
wrapping.

### Fix

Add wrapping/sizing rules to the editor container so text breaks and
wraps consistently across browsers, without changing the desktop layout:

- `overflow-wrap: anywhere` on `.bn-block-content` /
`.bn-inline-content` — unlike `break-word`, this reduces the min-content
size so flex children can actually shrink.
- `min-width: 0` on `.bn-block-content` and on the editor wrapper, plus
`max-width: 100%` on the wrapper.

### Test plan

- Open a Note containing a very long word / URL or a long paragraph.
- Android Chrome & Firefox: text now wraps within the viewport (no
horizontal overflow).
- iOS Safari: unchanged (still wraps).
- Desktop: layout unchanged.

### Screenshots
Android
<img width="1080" height="1949"
alt="Screenshot_20260620_231356_Chrome(1)"
src="https://github.com/user-attachments/assets/bb1e38cf-198a-4ded-9dde-e0a26e637ed8"
/>

iPhone
<img width="686" height="1280" alt="IMG_20260620_231841_096"
src="https://github.com/user-attachments/assets/9cee7557-bb69-453d-bea4-a5c37de220af"
/>


---

### ✅ Verified on a real Android device

Reproduced and validated on a **Samsung Galaxy A71 (Android, Chrome /
Blink)** using the exact note show-page DOM/CSS chain (`ScrollWrapper` →
full-width container → `StyledEditor` → `.bn-mantine` `container-type:
inline-size` → flex `.bn-block-content` → ProseMirror `word-wrap:
break-word`):

- **Without the fix:** a long unbreakable string stays on one line and
overflows horizontally off the viewport (`scrollWidth ≈ 1336px` in a
~360px viewport, with a horizontal scrollbar) — matching the reported
bug.
- **With the fix:** the same string wraps within the viewport.

Notably this does **not** reproduce on desktop Chromium — only on the
mobile engine — which matches the original report (Android
Chrome/Firefox broken, iOS Safari fine). The flex `.bn-block-content`
(`min-width: auto`) resolves to the unbreakable token's intrinsic width
on Android Blink; `min-width: 0` + `overflow-wrap: anywhere` lets it
shrink and wrap.

Screenshot
<img width="1080" height="2400" alt="image"
src="https://github.com/user-attachments/assets/827dc579-4b1e-43ea-8b28-0ca781b12d88"
/>

2026-06-25 16:49:11 +02:00