coder · aqandrew · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar } from "components/Avatar/Avatar";
 import { useState } from "react";
 import { action } from "storybook/actions";
-import { expect, userEvent, within } from "storybook/test";
+import { expect, screen, userEvent, within } from "storybook/test";
 import {
 	SelectFilter,
 	type SelectFilterOption,
@@ -88,7 +88,7 @@ export const SelectingOption: Story = {
 		const canvas = within(canvasElement);
 		const button = canvas.getByRole("button");
 		await userEvent.click(button);
-		const option = canvas.getByText("Option 25");
+		const option = screen.getByText("Option 25");
 		await userEvent.click(option);
 		await expect(button).toHaveTextContent("Option 25");
 	},
@@ -102,7 +102,7 @@ export const UnselectingOption: Story = {
 		const canvas = within(canvasElement);
 		const button = canvas.getByRole("button");
 		await userEvent.click(button);
-		const menu = canvasElement.querySelector<HTMLElement>("[role=menu]")!;
+		const menu = screen.getByRole("menu");
 		const option = within(menu).getByText("Option 26");
 		await userEvent.click(option);
 		await expect(button).toHaveTextContent("All options");
@@ -140,7 +140,7 @@ export const SearchingOption: Story = {
 		const canvas = within(canvasElement);
 		const button = canvas.getByRole("button");
 		await userEvent.click(button);
-		const search = canvas.getByLabelText("Search options");
+		const search = screen.getByLabelText("Search options");
 		await userEvent.type(search, "option-2");
 	},
 };
@@ -10,9 +10,9 @@ import {
 	SelectMenuTrigger,
 } from "components/SelectMenu/SelectMenu";
 import { type FC, type ReactNode, useState } from "react";
+import { cn } from "utils/cn";
 
 const BASE_WIDTH = 200;
-const POPOVER_WIDTH = 320;
 
 export type SelectFilterOption = {
 	startIcon?: ReactNode;
@@ -60,15 +60,15 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 				</SelectMenuButton>
 			</SelectMenuTrigger>
 			<SelectMenuContent
-				horizontal="right"
-				css={{
-					"& .MuiPaper-root": {
-						// When including selectFilterSearch, we aim for the width to be as
-						// wide as possible.
-						width: selectFilterSearch ? "100%" : undefined,
-						maxWidth: POPOVER_WIDTH,
-						minWidth: width,
-					},
+				align="end"
+				className={cn([
+					// When including selectFilterSearch, we aim for the width to be as
+					// wide as possible.
+					selectFilterSearch && "w-full",
+					"max-w-[320px]",
+				])}
+				style={{
+					minWidth: width,
 				}}
 			>
 				{selectFilterSearch}

@@ -3,13 +3,13 @@ import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import { visuallyHidden } from "@mui/utils";
 import { Button } from "components/Button/Button";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { Loader } from "components/Loader/Loader";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-} from "components/deprecated/Popover/Popover";
-import { ExternalImage } from "components/ExternalImage/ExternalImage";
-import { Loader } from "components/Loader/Loader";
+} from "components/Popover/Popover";
 import { ChevronDownIcon } from "lucide-react";
 import { type FC, lazy, Suspense, useState } from "react";
 
@@ -80,24 +80,21 @@ export const IconField: FC<IconFieldProps> = ({
 
 			<Global
 				styles={css`
-          em-emoji-picker {
-            --rgb-background: ${theme.palette.background.paper};
-            --rgb-input: ${theme.palette.primary.main};
-            --rgb-color: ${theme.palette.text.primary};
-
-            // Hack to prevent the right side from being cut off
-            width: 350px;
-          }
-        `}
+					em-emoji-picker {
+						--rgb-background: ${theme.palette.background.paper};
+						--rgb-input: ${theme.palette.primary.main};
+						--rgb-color: ${theme.palette.text.primary};
+					}
+				`}
 			/>
 			<Popover open={open} onOpenChange={setOpen}>
-				<PopoverTrigger>
+				<PopoverTrigger asChild>
 					<Button variant="outline" size="lg" className="flex-shrink-0">
 						Emoji
 						<ChevronDownIcon />
 					</Button>
 				</PopoverTrigger>
-				<PopoverContent id="emoji" horizontal="right">
+				<PopoverContent id="emoji" side="bottom" align="end" className="w-min">
 					<Suspense fallback={<Loader />}>
 						<EmojiPicker
 							onEmojiSelect={(emoji) => {

@@ -10,10 +10,16 @@ import {
 } from "react";
 import { cn } from "utils/cn";
 
+export type PopoverContentProps = PopoverPrimitive.PopoverContentProps;
+
+export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;
+
 export const Popover = PopoverPrimitive.Root;
 
 export const PopoverTrigger = PopoverPrimitive.Trigger;
 
+export const PopoverClose = PopoverPrimitive.PopoverClose;
+
 export const PopoverContent = forwardRef<
 	ElementRef<typeof PopoverPrimitive.Content>,
 	ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -23,6 +29,7 @@ export const PopoverContent = forwardRef<
 			ref={ref}
 			align={align}
 			sideOffset={sideOffset}
+			collisionPadding={16}
 			className={cn(
 				`z-50 w-72 rounded-md border border-solid bg-surface-primary
 				text-content-primary shadow-md outline-none

@@ -104,14 +104,3 @@ const SearchEmptyStyles = {
 		paddingBottom: 8,
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
-
-/**
- * Reusable styles for consumers of the base components
- */
-export const searchStyles = {
-	content: {
-		width: 320,
-		padding: 0,
-		borderRadius: 4,
-	},
-} satisfies Record<string, Interpolation<Theme>>;
@@ -4,8 +4,10 @@ import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	Popover,
 	PopoverContent,
+	type PopoverContentProps,
 	PopoverTrigger,
-} from "components/deprecated/Popover/Popover";
+	type PopoverTriggerProps,
+} from "components/Popover/Popover";
 import {
 	SearchField,
 	type SearchFieldProps,
@@ -26,9 +28,21 @@ const SIDE_PADDING = 16;
 
 export const SelectMenu = Popover;
 
-export const SelectMenuTrigger = PopoverTrigger;
+export const SelectMenuTrigger: FC<PopoverTriggerProps> = (props) => {
+	return <PopoverTrigger asChild {...props} />;
+};
 
-export const SelectMenuContent = PopoverContent;
+export const SelectMenuContent: FC<PopoverContentProps> = (props) => {
+	return (
+		<PopoverContent
+			{...props}
+			className={cn(
+				"w-auto bg-surface-secondary border-surface-quaternary overflow-y-auto text-sm",
+				props.className,
+			)}
+		/>
+	);
+};
 
 type SelectMenuButtonProps = ButtonProps & {
 	startIcon?: React.ReactNode;

@@ -2,7 +2,7 @@ import { css } from "@emotion/css";
 import { type Theme, useTheme } from "@emotion/react";
 import { type DependencyList, useMemo } from "react";
 
-export type ClassName = (cssFn: typeof css, theme: Theme) => string;
+type ClassName = (cssFn: typeof css, theme: Theme) => string;
 
 /**
  * @deprecated This hook was used as an escape hatch to generate class names

@@ -1,12 +1,12 @@
-import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { css, type Interpolation, type Theme } from "@emotion/react";
 import MenuItem from "@mui/material/MenuItem";
 import { Button } from "components/Button/Button";
 import {
 	Popover,
+	PopoverClose,
 	PopoverContent,
 	PopoverTrigger,
-	usePopover,
-} from "components/deprecated/Popover/Popover";
+} from "components/Popover/Popover";
 import { ChevronDownIcon } from "lucide-react";
 import { linkToAuditing } from "modules/navigation";
 import type { FC } from "react";
@@ -27,8 +27,6 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 	canViewConnectionLog,
 	canViewHealth,
 }) => {
-	const theme = useTheme();
-
 	if (
 		!canViewAuditLog &&
 		!canViewConnectionLog &&
@@ -41,22 +39,16 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 
 	return (
 		<Popover>
-			<PopoverTrigger>
+			<PopoverTrigger asChild>
 				<Button variant="outline" size="lg">
 					Admin settings
 					<ChevronDownIcon className="text-content-primary !size-icon-xs" />
 				</Button>
 			</PopoverTrigger>
 
 			<PopoverContent
-				horizontal="right"
-				css={{
-					".MuiPaper-root": {
-						minWidth: "auto",
-						width: 180,
-						boxShadow: theme.shadows[6],
-					},
-				}}
+				align="end"
+				className="bg-surface-secondary border-surface-quaternary w-[180px] min-w-auto"
 			>
 				<DeploymentDropdownContent
 					canViewDeployment={canViewDeployment}
@@ -77,79 +69,72 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 	canViewHealth,
 	canViewConnectionLog,
 }) => {
-	const popover = usePopover();
-
-	const onPopoverClose = () => popover.setOpen(false);
-
 	return (
 		<nav>
 			{canViewDeployment && (
-				<MenuItem
-					component={NavLink}
-					to="/deployment"
-					css={styles.menuItem}
-					onClick={onPopoverClose}
-				>
-					Deployment
-				</MenuItem>
+				<PopoverClose asChild>
+					<MenuItem component={NavLink} to="/deployment" css={styles.menuItem}>
+						Deployment
+					</MenuItem>
+				</PopoverClose>
 			)}
 			{canViewOrganizations && (
-				<MenuItem
-					component={NavLink}
-					to="/organizations"
-					css={styles.menuItem}
-					onClick={onPopoverClose}
-				>
-					Organizations
-				</MenuItem>
+				<PopoverClose asChild>
+					<MenuItem
+						component={NavLink}
+						to="/organizations"
+						css={styles.menuItem}
+					>
+						Organizations
+					</MenuItem>
+				</PopoverClose>
 			)}
 			{canViewAuditLog && (
-				<MenuItem
-					component={NavLink}
-					to={linkToAuditing}
-					css={styles.menuItem}
-					onClick={onPopoverClose}
-				>
-					Audit Logs
-				</MenuItem>
+				<PopoverClose asChild>
+					<MenuItem
+						component={NavLink}
+						to={linkToAuditing}
+						css={styles.menuItem}
+					>
+						Audit Logs
+					</MenuItem>
+				</PopoverClose>
 			)}
 			{canViewConnectionLog && (
-				<MenuItem
-					component={NavLink}
-					to="/connectionlog"
-					css={styles.menuItem}
-					onClick={onPopoverClose}
-				>
-					Connection Logs
-				</MenuItem>
+				<PopoverClose asChild>
+					<MenuItem
+						component={NavLink}
+						to="/connectionlog"
+						css={styles.menuItem}
+					>
+						Connection Logs
+					</MenuItem>
+				</PopoverClose>
 			)}
 			{canViewHealth && (
-				<MenuItem
-					component={NavLink}
-					to="/health"
-					css={styles.menuItem}
-					onClick={onPopoverClose}
-				>
-					Healthcheck
-				</MenuItem>
+				<PopoverClose asChild>
+					<MenuItem component={NavLink} to="/health" css={styles.menuItem}>
+						Healthcheck
+					</MenuItem>
+				</PopoverClose>
 			)}
 		</nav>
 	);
 };
 
 const styles = {
 	menuItem: (theme) => css`
-    text-decoration: none;
-    color: inherit;
-    gap: 8px;
-    padding: 8px 20px;
-    font-size: 14px;
+		text-decoration: none;
+		color: inherit;
+		gap: 8px;
+		padding: 8px 20px;
+		font-size: 14px;
 
-    &:hover {
-      background-color: ${theme.palette.action.hover};
-      transition: background-color 0.3s ease;
-    }
-  `,
+		&:hover {
+			background-color: ${theme.palette.action.hover};
+			transition: background-color 0.3s ease;
+		}
+	`,
 	menuItemIcon: (theme) => ({
 		color: theme.palette.text.secondary,
 		width: 20,