fix: arrow shifting content

huntabyte · Jan 19, 2024 · b443720 · b443720
1 parent d8f4199
commit b443720
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 52 deletions.
diff --git a/src/lib/bits/link-preview/components/link-preview-content.svelte b/src/lib/bits/link-preview/components/link-preview-content.svelte
@@ -49,19 +49,21 @@
 	$: builder = $content;
 	$: Object.assign(builder, attrs);
 
-	$: updatePositioning({
-		side,
-		align,
-		sideOffset,
-		alignOffset,
-		collisionPadding,
-		avoidCollisions,
-		collisionBoundary,
-		sameWidth,
-		fitViewport,
-		strategy,
-		overlap
-	});
+	$: if ($open) {
+		updatePositioning({
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			collisionPadding,
+			avoidCollisions,
+			collisionBoundary,
+			sameWidth,
+			fitViewport,
+			strategy,
+			overlap
+		});
+	}
 </script>
 
 {#if asChild && $open}

diff --git a/src/lib/bits/menu/components/menu-content.svelte b/src/lib/bits/menu/components/menu-content.svelte
@@ -48,19 +48,21 @@
 	$: builder = $menu;
 	$: Object.assign(builder, attrs);
 
-	$: updatePositioning({
-		side,
-		align,
-		sideOffset,
-		alignOffset,
-		collisionPadding,
-		avoidCollisions,
-		collisionBoundary,
-		sameWidth,
-		fitViewport,
-		strategy,
-		overlap
-	});
+	$: if ($open) {
+		updatePositioning({
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			collisionPadding,
+			avoidCollisions,
+			collisionBoundary,
+			sameWidth,
+			fitViewport,
+			strategy,
+			overlap
+		});
+	}
 </script>
 
 {#if asChild && $open}

diff --git a/src/lib/bits/popover/components/popover-content.svelte b/src/lib/bits/popover/components/popover-content.svelte
@@ -46,19 +46,21 @@
 	$: builder = $content;
 	$: Object.assign(builder, attrs);
 
-	$: updatePositioning({
-		side,
-		align,
-		sideOffset,
-		alignOffset,
-		collisionPadding,
-		avoidCollisions,
-		collisionBoundary,
-		sameWidth,
-		fitViewport,
-		strategy,
-		overlap
-	});
+	$: if ($open) {
+		updatePositioning({
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			collisionPadding,
+			avoidCollisions,
+			collisionBoundary,
+			sameWidth,
+			fitViewport,
+			strategy,
+			overlap
+		});
+	}
 </script>
 
 {#if asChild && $open}

diff --git a/src/lib/bits/popover/components/popover.svelte b/src/lib/bits/popover/components/popover.svelte
@@ -35,6 +35,12 @@
 				open = next;
 			}
 			return next;
+		},
+		positioning: {
+			gutter: 0,
+			offset: {
+				mainAxis: 1
+			}
 		}
 	});
 

diff --git a/src/lib/bits/popover/ctx.ts b/src/lib/bits/popover/ctx.ts
@@ -23,6 +23,10 @@ export function setCtx(props: CreatePopoverProps) {
 	const getAttrs = createBitAttrs(NAME, PARTS);
 	const popover = {
 		...createPopover({
+			positioning: {
+				placement: "bottom",
+				gutter: 0
+			},
 			...removeUndefined(props),
 			forceVisible: true
 		}),

diff --git a/src/lib/bits/select/components/select-content.svelte b/src/lib/bits/select/components/select-content.svelte
@@ -50,19 +50,21 @@
 	$: builder = $menu;
 	$: Object.assign(builder, attrs);
 
-	$: updatePositioning({
-		side,
-		align,
-		sideOffset,
-		alignOffset,
-		collisionPadding,
-		avoidCollisions,
-		collisionBoundary,
-		sameWidth,
-		fitViewport,
-		strategy,
-		overlap
-	});
+	$: if ($open) {
+		updatePositioning({
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			collisionPadding,
+			avoidCollisions,
+			collisionBoundary,
+			sameWidth,
+			fitViewport,
+			strategy,
+			overlap
+		});
+	}
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->