From 0b31d2a6a0ee1668ddd75f690a324ab99700f48f Mon Sep 17 00:00:00 2001
From: Aleksa Jankovic <12417145+ak800i@users.noreply.github.com>
Date: Thu, 25 Jun 2026 16:49:11 +0200
Subject: [PATCH] fix(front): wrap long note/markdown text on mobile browsers
 (#21909)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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"
/>
---
 .../blocknote-editor/components/BlockEditor.tsx       | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx
index 8f0edac2e1..80fd485cec 100644
--- a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx
+++ b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx
@@ -30,6 +30,8 @@ interface BlockEditorProps {
 
 // oxlint-disable-next-line twenty/no-hardcoded-colors
 const StyledEditor = styled.div`
+  max-width: 100%;
+  min-width: 0;
   width: 100%;
 
   & .editor {
@@ -76,6 +78,15 @@ const StyledEditor = styled.div`
     padding-inline: 0px;
   }
 
+  & .bn-block-content {
+    min-width: 0;
+  }
+
+  & .bn-block-content,
+  & .bn-inline-content {
+    overflow-wrap: anywhere;
+  }
+
   & .bn-inline-content {
     width: 100%;
   }