marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-10-23 16:04:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Calculate collisionPadding dynamically based on container

Browse Source
This commit is contained in:
zsviczian
2025-10-21 19:34:27 +02:00
committed by GitHub
parent a17e9ce503
commit d9397fc457
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/excalidraw/components/PropertiesPopover.tsx
View File

@@ -41,6 +41,19 @@ export const PropertiesPopover = React.forwardRef<
) => { ) => {
const device = useDevice(); const device = useDevice();
const collisionPadding = React.useMemo(() => {
if (!container) {
return 8;
}
const rect = container.getBoundingClientRect();
return {
top: Math.max(8, rect.top),
right: Math.max(8, window.innerWidth - rect.right),
bottom: Math.max(8, window.innerHeight - rect.bottom),
left: Math.max(8, rect.left),
};
}, [container]);
return ( return (
<Popover.Portal container={container}> <Popover.Portal container={container}>
<Popover.Content <Popover.Content
@@ -60,7 +73,7 @@ export const PropertiesPopover = React.forwardRef<
alignOffset={-16} alignOffset={-16}
sideOffset={20} sideOffset={20}
collisionBoundary={container ?? undefined} collisionBoundary={container ?? undefined}
collisionPadding={8} collisionPadding={collisionPadding}
style={{ style={{
zIndex: "var(--zIndex-ui-styles-popup)", zIndex: "var(--zIndex-ui-styles-popup)",
marginLeft: device.editor.isMobile ? "0.5rem" : undefined, marginLeft: device.editor.isMobile ? "0.5rem" : undefined,