refactor: replace Popover in OwnerBreadcrumb, WorkspaceBreadcrumb,

aqandrew · aqandrew · commit ef6cceb009b4 · 2025-08-29T18:20:51.000Z
OrganizationBreadcrumb
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -46,6 +46,7 @@ export const HelpTooltipContent: FC<TooltipContentProps> = ({
 		<TooltipContent
 			side="bottom"
 			align="start"
+			collisionPadding={16} // 1rem
 			{...props}
 			className={cn(
 				"w-[320px] p-5 bg-surface-secondary border-surface-quaternary text-sm",
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -6,7 +6,6 @@ import type * as TypesGen from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { CopyButton } from "components/CopyButton/CopyButton";
-import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
 import {
 	Topbar,
 	TopbarAvatar,
@@ -15,7 +14,10 @@ import {
 	TopbarIcon,
 	TopbarIconButton,
 } from "components/FullPageLayout/Topbar";
-import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
+import {
+	HelpTooltip,
+	HelpTooltipContent,
+} from "components/HelpTooltip/HelpTooltip";
 import { ChevronLeftIcon, CircleDollarSign, TrashIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { linkToTemplate, useLinks } from "modules/navigation";
@@ -28,6 +30,7 @@ import type { WorkspacePermissions } from "../../modules/workspaces/permissions"
 import { WorkspaceActions } from "./WorkspaceActions/WorkspaceActions";
 import { WorkspaceNotifications } from "./WorkspaceNotifications/WorkspaceNotifications";
 import { WorkspaceScheduleControls } from "./WorkspaceScheduleControls";
+import { TooltipTrigger } from "components/Tooltip/Tooltip";
 
 interface WorkspaceProps {
 	isUpdating: boolean;
@@ -253,21 +256,18 @@ const OwnerBreadcrumb: FC<OwnerBreadcrumbProps> = ({
 	ownerAvatarUrl,
 }) => {
 	return (
-		<Popover mode="hover">
-			<PopoverTrigger>
+		<HelpTooltip>
+			<TooltipTrigger asChild>
 				<span css={styles.breadcrumbSegment}>
 					<Avatar size="sm" fallback={ownerName} src={ownerAvatarUrl} />
 					<span css={styles.breadcrumbText}>{ownerName}</span>
 				</span>
-			</PopoverTrigger>
+			</TooltipTrigger>
 
-			<HelpTooltipContent
-				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-				transformOrigin={{ vertical: "top", horizontal: "center" }}
-			>
+			<HelpTooltipContent align="center">
 				<AvatarData title={ownerName} subtitle="Owner" src={ownerAvatarUrl} />
 			</HelpTooltipContent>
-		</Popover>
+		</HelpTooltip>
 	);
 };
 
@@ -283,8 +283,8 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 	orgIconUrl,
 }) => {
 	return (
-		<Popover mode="hover">
-			<PopoverTrigger>
+		<HelpTooltip>
+			<TooltipTrigger asChild>
 				<span css={styles.breadcrumbSegment}>
 					<Avatar
 						size="sm"
@@ -294,12 +294,9 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 					/>
 					<span css={styles.breadcrumbText}>{orgName}</span>
 				</span>
-			</PopoverTrigger>
+			</TooltipTrigger>
 
-			<HelpTooltipContent
-				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-				transformOrigin={{ vertical: "top", horizontal: "center" }}
-			>
+			<HelpTooltipContent align="center">
 				<AvatarData
 					title={
 						orgPageUrl ? (
@@ -323,7 +320,7 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 					imgFallbackText={orgName}
 				/>
 			</HelpTooltipContent>
-		</Popover>
+		</HelpTooltip>
 	);
 };
 
@@ -346,8 +343,8 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 }) => {
 	return (
 		<div className="flex items-center">
-			<Popover mode="hover">
-				<PopoverTrigger>
+			<HelpTooltip>
+				<TooltipTrigger asChild>
 					<span css={styles.breadcrumbSegment}>
 						<TopbarAvatar
 							src={templateIconUrl}
@@ -358,12 +355,9 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 							{workspaceName}
 						</span>
 					</span>
-				</PopoverTrigger>
+				</TooltipTrigger>
 
-				<HelpTooltipContent
-					anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-					transformOrigin={{ vertical: "top", horizontal: "center" }}
-				>
+				<HelpTooltipContent align="center">
 					<AvatarData
 						title={
 							<Link
@@ -393,7 +387,7 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 						imgFallbackText={templateDisplayName}
 					/>
 				</HelpTooltipContent>
-			</Popover>
+			</HelpTooltip>
 			<CopyButton text={workspaceName} label="Copy workspace name" />
 		</div>
 	);
