From 150c3263693b5c78b4a5d6f5e8623cbb03a924aa Mon Sep 17 00:00:00 2001
From: Sanskar Shukla <98996523+sanskar0627@users.noreply.github.com>
Date: Mon, 13 Apr 2026 12:38:28 +0530
Subject: [PATCH] fix: prevent image upload panel from being clipped in side
 panel (#19613)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes: #19571

## What's happening
BlockNote's `.bn-panel` (the Upload/Embed popup for images, videos,
audio) has a hardcoded `width: 500px` in the upstream
`blocknoteStyles.css`. When you open it inside the side panel (~350px
wide), it overflows past the container's `overflow: hidden` and gets
clipped.
## Why percentage-based fixes don't work here
I initially tried `max-width: 100%` on `.bn-panel` but it doesn't work
the panel sits inside a Floating UI popover that's absolutely positioned
with no explicit width. Its width comes from its content (the 500px
panel), so `max-width: 100%` just resolves to that same 500px. It's a
circular reference.
## The fix
```css
& .bn-mantine {
  container-type: inline-size;
}
& .bn-mantine .bn-panel {
  width: min(500px, 100cqi);
  box-sizing: border-box;
}
```
container-type: inline-size on .bn-mantine lets us reference the
editor's actual width using cqi units. min(500px, 100cqi) keeps the
panel at 500px in wide containers (main note view) and shrinks it to fit
in narrow ones (side panel).

I scoped container-type to .bn-mantine (BlockNote's own root wrapper)
rather than the outer StyledEditor div, so the containment context stays
within BlockNote's own tree.

#Before
<img width="373" height="530" alt="image"
src="https://github.com/user-attachments/assets/63fb407c-79d1-4faa-afb4-15a98fe4ba22"
/>

#After
<img width="332" height="597" alt="image"
src="https://github.com/user-attachments/assets/f7e91c28-ad35-44a5-9450-0b6d52714977"
/>
<img width="599" height="579" alt="image"
src="https://github.com/user-attachments/assets/20fd457b-2d06-4799-9164-f993ef37d833"
/>


Tested
Side panel: panel fits correctly, matches "Add image" button width
Full-width editor: panel stays at 500px
Slash menu, formatting toolbar, drag handles: all unaffected

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .../src/modules/blocknote-editor/components/BlockEditor.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 272c9b6e43..c0689304e8 100644
--- a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx
+++ b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx
@@ -136,7 +136,7 @@ const StyledEditor = styled.div`
   }
 
   & .bn-mantine .bn-panel {
-    width: 100cqi;
+    width: min(500px, 100cqi);
   }
 `;