From de70ff3206c0a6bb45e3d3eaea0c13534303d161 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 7 Feb 2025 11:48:01 -0300
Subject: [PATCH] fix: display SVG emojis in the picker (#16492)

Fix https://github.com/coder/coder/issues/16263
---
 site/src/components/IconField/EmojiPicker.tsx | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx
index 291a2dc357..476e24f293 100644
--- a/site/src/components/IconField/EmojiPicker.tsx
+++ b/site/src/components/IconField/EmojiPicker.tsx
@@ -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 = [
@@ -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"