diff --git a/packages/ui/src/components/Menu.svelte b/packages/ui/src/components/Menu.svelte index 96f5fdf58e..63ba26ee4b 100644 --- a/packages/ui/src/components/Menu.svelte +++ b/packages/ui/src/components/Menu.svelte @@ -82,7 +82,7 @@ showPopup( action.component, action.props, - { getBoundingClientRect: () => target.getBoundingClientRect(), position: { v: 'top', h: 'right' } }, + { getBoundingClientRect: () => target.getBoundingClientRect(), kind: 'submenu' }, (evt) => { dispatch('close') }, diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts index a42ca95bfa..921297d473 100644 --- a/packages/ui/src/popups.ts +++ b/packages/ui/src/popups.ts @@ -150,10 +150,24 @@ export function fitPopupPositionedElement ( const rect = alignment.getBoundingClientRect() const rectPopup = modalHTML.getBoundingClientRect() const docWidth = document.body.clientWidth + const docHeight = document.body.clientHeight newProps.left = newProps.right = newProps.top = newProps.bottom = '' newProps.maxHeight = newProps.height = '' newProps.maxWidth = newProps.width = '' - if (alignment.position !== undefined) { + if (alignment?.kind === 'submenu') { + const dirH = + docWidth - rect.right - rectPopup.width - 16 > 0 ? 'right' : rect.left > docWidth - rect.right ? 'left' : 'right' + const dirV = + docHeight - rect.top - rectPopup.height - 16 > 0 + ? 'bottom' + : rect.bottom > docHeight - rect.top + ? 'top' + : 'bottom' + if (dirH === 'right') newProps.left = `${rect.right - 4}px` + else newProps.right = `${docWidth - rect.left - 4}px` + if (dirV === 'bottom') newProps.top = `${rect.top - 4}px` + else newProps.bottom = `${docHeight - rect.bottom - 4}px` + } else if (alignment.position !== undefined) { if (alignment.position.v === 'top') { newProps.top = `${rect.top}px` } else if (alignment.position.v === 'bottom') { diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 841d7528b2..6bfaf7b0b4 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -121,6 +121,7 @@ export interface PopupPositionElement { v: VerticalAlignment h: HorizontalAlignment } + kind?: 'submenu' } export type PopupPosAlignment = 'right' | 'top' | 'float' | 'account' | 'full' | 'content' | 'middle'