fix: allow BlockNote floating panels to overflow side panel container

https://sonarly.com/issue/23837?type=bug

BlockNote's built-in image upload/embed panel is clipped by multiple `overflow: hidden` CSS declarations on the side panel container hierarchy, making it impossible to fully interact with image insertion when editing notes in the side panel.

Fix: Added a CSS override for BlockNote's `.bn-file-panel` class in the `StyledEditor` component to constrain the file upload/embed panel width to 100% of its container. This prevents the panel from extending beyond the side panel boundaries where it would be clipped by the `overflow: hidden` on the side panel container hierarchy.

The fix is placed in `BlockEditor.tsx` alongside all other BlockNote CSS overrides, following the existing pattern in the codebase. The `box-sizing: border-box` ensures padding/border are included in the width calculation.

**Limitations:** This is a partial fix. If the panel is positioned with absolute coordinates by Mantine's Floating UI that place it outside the container entirely, a more comprehensive fix would be needed — either a custom `filePanel` component that renders via a portal (using the existing `ModalContainerContext` in `SidePanelForDesktop`), or changing `overflow: hidden` to `overflow: clip` on `StyledSidePanel` (which would still clip but wouldn't create a scroll container for absolutely positioned descendants).
This commit is contained in:
Sonarly Claude Code 2026-04-10 19:56:46 +00:00
parent f52d66b960
commit 3f9b551366

View file

@ -130,6 +130,11 @@ const StyledEditor = styled.div`
font-size: 0.9rem;
padding: 2px 4px;
}
& .bn-file-panel {
box-sizing: border-box;
max-width: 100%;
}
`;
export const BlockEditor = ({