diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 1884bbf2d6..d99601afeb 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -1,6 +1,6 @@ export default function positionDropdown( element, - { anchor, align, maxWidth, useAnchorWidth } + { anchor, align, maxWidth, useAnchorWidth, offset = 5 } ) { const update = () => { if (!anchor) { @@ -20,9 +20,9 @@ export default function positionDropdown( if (align === "right-outside") { styles.top = anchorBounds.top } else if (window.innerHeight - anchorBounds.bottom < 100) { - styles.top = anchorBounds.top - elementBounds.height - 5 + styles.top = anchorBounds.top - elementBounds.height - offset } else { - styles.top = anchorBounds.bottom + 5 + styles.top = anchorBounds.bottom + offset styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20 } @@ -36,7 +36,7 @@ export default function positionDropdown( if (align === "right") { styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width } else if (align === "right-outside") { - styles.left = anchorBounds.right + 10 + styles.left = anchorBounds.right + offset } else { styles.left = anchorBounds.left } diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index 8dfbb69f46..b873fabb80 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -17,6 +17,7 @@ export let open = false export let useAnchorWidth = false export let dismissible = true + export let offset = 5 $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum" @@ -65,6 +66,7 @@ align, maxWidth, useAnchorWidth, + offset, }} use:clickOutside={{ callback: dismissible ? handleOutsideClick : () => {},