diff --git a/web/src/lib/components/repo/CommitSignOff.svelte b/web/src/lib/components/repo/CommitSignOff.svelte
index 8199303f2..740bce451 100644
--- a/web/src/lib/components/repo/CommitSignOff.svelte
+++ b/web/src/lib/components/repo/CommitSignOff.svelte
@@ -29,7 +29,7 @@
 <Hovercard
 	class={className}
 	cardClass="px-2.5 py-2 select-text"
-	side="right"
+	align="top-middle"
 	openDelay={50}
 	closeDelay={300}
 >
diff --git a/web/src/lib/components/ui/Hovercard.svelte b/web/src/lib/components/ui/Hovercard.svelte
index e28878dd9..f86e64cb6 100644
--- a/web/src/lib/components/ui/Hovercard.svelte
+++ b/web/src/lib/components/ui/Hovercard.svelte
@@ -18,15 +18,23 @@
 			card: "hovercard-card pointer-events-auto fixed inset-auto z-50 m-0 h-fit popover-transition overflow-visible rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular"
 		},
 		variants: {
-			side: {
-				top: {},
-				right: {},
-				bottom: {},
-				left: {}
+			align: {
+				"top-left": {},
+				"top-middle": {},
+				"top-right": {},
+				"bottom-left": {},
+				"bottom-middle": {},
+				"bottom-right": {},
+				"left-top": {},
+				"left-middle": {},
+				"left-bottom": {},
+				"right-top": {},
+				"right-middle": {},
+				"right-bottom": {}
 			}
 		},
 		defaultVariants: {
-			side: "bottom"
+			align: "bottom-left"
 		}
 	});
 
@@ -54,8 +62,8 @@
 		closeDelay?: number;
 		// skip the card entirely — handy where a hovercard would only be noise
 		disabled?: boolean;
-		// which edge of the trigger the card hangs off
-		side?: HovercardVariants["side"];
+		// which corner or edge of the trigger the card hangs off
+		align?: HovercardVariants["align"];
 		// wrapper (anchor) class
 		class?: string;
 		// extends the card's own classes, e.g. width and padding
@@ -71,14 +79,14 @@
 		openDelay = 500,
 		closeDelay = 150,
 		disabled = false,
-		side = "bottom",
+		align = "bottom-left",
 		class: className,
 		cardClass,
 		onOpen,
 		origin
 	}: Props = $props();
 
-	const classes = $derived(hovercard({ side }));
+	const classes = $derived(hovercard({ align }));
 
 	let wrapperEl = $state<HTMLElement>();
 	let cardEl = $state<HTMLElement>();
@@ -186,7 +194,7 @@
 		bind:this={cardEl}
 		id={cardId}
 		popover="manual"
-		data-side={side}
+		data-align={align}
 		style="position-anchor: {anchorName}"
 		class={classes.card({ class: cardClass })}
 		ontoggle={onToggle}
@@ -210,24 +218,64 @@
 			position-try: flip-block, flip-inline;
 		}
 
-		.hovercard-card[data-side="bottom"] {
+		.hovercard-card[data-align="top-left"] {
+			margin-block: 0.375rem;
+			position-area: block-start span-inline-end;
+		}
+
+		.hovercard-card[data-align="top-middle"] {
+			margin-block: 0.375rem;
+			position-area: block-start center;
+		}
+
+		.hovercard-card[data-align="top-right"] {
+			margin-block: 0.375rem;
+			position-area: block-start span-inline-start;
+		}
+
+		.hovercard-card[data-align="bottom-left"] {
 			margin-block: 0.375rem;
 			position-area: block-end span-inline-end;
 		}
 
-		.hovercard-card[data-side="top"] {
+		.hovercard-card[data-align="bottom-middle"] {
 			margin-block: 0.375rem;
-			position-area: block-start span-inline-end;
+			position-area: block-end center;
+		}
+
+		.hovercard-card[data-align="bottom-right"] {
+			margin-block: 0.375rem;
+			position-area: block-end span-inline-start;
+		}
+
+		.hovercard-card[data-align="left-top"] {
+			margin-inline: 0.375rem;
+			position-area: inline-start span-block-end;
+		}
+
+		.hovercard-card[data-align="left-middle"] {
+			margin-inline: 0.375rem;
+			position-area: inline-start center;
+		}
+
+		.hovercard-card[data-align="left-bottom"] {
+			margin-inline: 0.375rem;
+			position-area: inline-start span-block-start;
+		}
+
+		.hovercard-card[data-align="right-top"] {
+			margin-inline: 0.375rem;
+			position-area: inline-end span-block-end;
 		}
 
-		.hovercard-card[data-side="left"] {
+		.hovercard-card[data-align="right-middle"] {
 			margin-inline: 0.375rem;
-			position-area: inline-start;
+			position-area: inline-end center;
 		}
 
-		.hovercard-card[data-side="right"] {
+		.hovercard-card[data-align="right-bottom"] {
 			margin-inline: 0.375rem;
-			position-area: inline-end;
+			position-area: inline-end span-block-start;
 		}
 	}
 </style>