mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 13:37:22 +00:00
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:
parent
f52d66b960
commit
3f9b551366
1 changed files with 5 additions and 0 deletions
|
|
@ -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 = ({
|
||||
|
|
|
|||
Loading…
Reference in a new issue