Feb 7, 2025 · Feb 7, 2025 · Feb 7, 2025 · Feb 7, 2025
diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx
 import data from "@emoji-mart/data/sets/15/apple.json";
 import EmojiMart from "@emoji-mart/react";
 import type { ComponentProps, FC } from "react";
 import {
 type ComponentProps,
 type FC,
 useEffect,
 useLayoutEffect,
 } from "react";
 import icons from "theme/icons.json";

 const custom = [
 >;

 const EmojiPicker: FC<EmojiPickerProps> = (props) => {
 /**
 * Workaround for a bug in the emoji-mart library where custom emoji images render improperly.
 * Setting the image width to 100% ensures they display correctly.
 *
 * Issue:   https://github.com/missive/emoji-mart/issues/805
 * Open PR: https://github.com/missive/emoji-mart/pull/806
 */
 useEffect(() => {
 const picker = document.querySelector("em-emoji-picker")?.shadowRoot;
 if (!picker) {
 return;
 }
 const css = document.createElement("style");
 css.textContent = ".emoji-mart-emoji img { width: 100% }";
 picker.appendChild(css);
 }, []);

 return (
 <EmojiMart
 theme="dark"
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,11 @@
		import data from "@emoji-mart/data/sets/15/apple.json";
		import EmojiMart from "@emoji-mart/react";
		import type { ComponentProps, FC } from "react";
		import {
		type ComponentProps,
		type FC,
		useEffect,
		useLayoutEffect,
		} from "react";
		import icons from "theme/icons.json";

		const custom = [
Expand All		@@ -26,6 +31,23 @@ type EmojiPickerProps = Omit<
		>;

		const EmojiPicker: FC<EmojiPickerProps> = (props) => {
		/**
		* Workaround for a bug in the emoji-mart library where custom emoji images render improperly.
		* Setting the image width to 100% ensures they display correctly.
		*
		* Issue: https://github.com/missive/emoji-mart/issues/805
		* Open PR: https://github.com/missive/emoji-mart/pull/806
		*/
		useEffect(() => {
		const picker = document.querySelector("em-emoji-picker")?.shadowRoot;
		if (!picker) {
		return;
		}
		const css = document.createElement("style");
		css.textContent = ".emoji-mart-emoji img { width: 100% }";
		picker.appendChild(css);
		}, []);

		return (
		<EmojiMart
		theme="dark"
Expand Down