diff --git a/frontend/src/app/context-switcher.tsx b/frontend/src/app/context-switcher.tsx
index 6a2c53b60a..96b6fdaec0 100644
--- a/frontend/src/app/context-switcher.tsx
+++ b/frontend/src/app/context-switcher.tsx
@@ -1,5 +1,5 @@
 import { useClerk } from "@clerk/clerk-react";
-import { type Project } from "@rivet-gg/cloud";
+import type { Project } from "@rivet-gg/cloud";
 import { faChevronDown, faPlusCircle, Icon } from "@rivet-gg/icons";
 import {
 	useInfiniteQuery,
@@ -271,26 +271,31 @@ function ProjectList({
 						) : null}
 
 						{data?.map((project, index) => {
-							const Component = index < 5 ? PrefetchedProjectListItem : ProjectListItem;
-							return <Component
-								key={project.id}
-								{...project}
-								onHover={() => onHover?.(project.name)}
-								onSelect={() => {
-									onClose?.();
-									clerk.setActive({
-										organization,
-									});
-									return navigate({
-										to: "/orgs/$organization/projects/$project",
-										params: {
-											organization: organization,
-											project: project.name,
-										},
-										search: {},
-									});
-								}}
-							/>
+							const Component =
+								index < 5
+									? PrefetchedProjectListItem
+									: ProjectListItem;
+							return (
+								<Component
+									key={project.id}
+									{...project}
+									onHover={() => onHover?.(project.name)}
+									onSelect={() => {
+										onClose?.();
+										clerk.setActive({
+											organization,
+										});
+										return navigate({
+											to: "/orgs/$organization/projects/$project",
+											params: {
+												organization: organization,
+												project: project.name,
+											},
+											search: {},
+										});
+									}}
+								/>
+							);
 						})}
 						{isLoading || isFetchingNextPage ? (
 							<>
@@ -333,6 +338,7 @@ function PrefetchedProjectListItem({
 	id,
 	name,
 	displayName,
+	...props
 }: Project) {
 	usePrefetchInfiniteQuery({
 		...useCloudDataProvider().currentOrgProjectNamespacesQueryOptions({
@@ -340,7 +346,14 @@ function PrefetchedProjectListItem({
 		}),
 	});
 
-	return <ProjectListItem id={id} name={name} displayName={displayName} />;
+	return (
+		<ProjectListItem
+			id={id}
+			name={name}
+			displayName={displayName}
+			{...props}
+		/>
+	);
 }
 
 function ProjectListItem({
diff --git a/frontend/src/components/safe-hover.tsx b/frontend/src/components/safe-hover.tsx
index 6dd8a4baae..861736a7b2 100644
--- a/frontend/src/components/safe-hover.tsx
+++ b/frontend/src/components/safe-hover.tsx
@@ -1,12 +1,12 @@
 import { Slot } from "@radix-ui/react-slot";
-import { type MouseEventHandler, useCallback } from "react";
+import { type MouseEventHandler, type ReactNode, useCallback } from "react";
 import styles from "./styles/safe-hover.module.css";
 
 export function SafeHover({
 	children,
 	offset = 0,
 }: {
-	children: React.ReactNode;
+	children: ReactNode;
 	offset?: number;
 }) {
 	const onMouseEnter: MouseEventHandler = useCallback(
@@ -15,14 +15,18 @@ export function SafeHover({
 			const parentRect = (
 				el.parentNode as HTMLElement
 			)?.getBoundingClientRect();
+
+			if (!parentRect) return;
+
+			const { top, bottom } = el.getBoundingClientRect();
 			el.style.setProperty(
 				"--safe-y0",
-				`${el.getBoundingClientRect().top - parentRect.top + offset}px`,
+				`${top - parentRect.top + offset}px`,
 			);
 
 			el.style.setProperty(
 				"--safe-y1",
-				`${el.getBoundingClientRect().bottom - parentRect.top + offset}px`,
+				`${bottom - parentRect.top + offset}px`,
 			);
 		},
 		[offset],
@@ -30,7 +34,7 @@ export function SafeHover({
 
 	const onMouseMove: MouseEventHandler = useCallback((e) => {
 		const el = e.currentTarget as HTMLElement;
-		el.style.setProperty("--safe-x", `${e.nativeEvent.offsetX}px`);
+		el.style.setProperty("--safe-x", `${e.nativeEvent.offsetX + 5}px`);
 	}, []);
 
 	return (