refactor: replace deprecated Popover in IconField

aqandrew · aqandrew · commit ff6c7940fd73 · 2025-08-30T00:59:27.000Z
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -7,7 +7,7 @@ import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-} from "components/deprecated/Popover/Popover";
+} from "components/Popover/Popover";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
 import { ChevronDownIcon } from "lucide-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) => {
