From 794f04b7acd62a50111ea6a70bbdb57f1f481bac Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 7 Feb 2025 14:09:44 +0000
Subject: [PATCH 1/3] fix: display SVG emojis in the picker

---
 site/src/components/IconField/EmojiPicker.tsx | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx
index 291a2dc357723..2f8918b0713f2 100644
--- a/site/src/components/IconField/EmojiPicker.tsx
+++ b/site/src/components/IconField/EmojiPicker.tsx
@@ -1,6 +1,6 @@
 import data from "@emoji-mart/data/sets/15/apple.json";
 import EmojiMart from "@emoji-mart/react";
-import type { ComponentProps, FC } from "react";
+import { useEffect, useLayoutEffect, type ComponentProps, type FC } from "react";
 import icons from "theme/icons.json";
 
 const custom = [
@@ -26,8 +26,24 @@ 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.
+	 *
+	 * Reference: 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
+			<EmojiMart
 			theme="dark"
 			set="apple"
 			emojiVersion="15"

From c66fe9de170b3b75113744d1d0bcd9a191919a56 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 7 Feb 2025 14:11:09 +0000
Subject: [PATCH 2/3] Fix lint

---
 site/src/components/IconField/EmojiPicker.tsx | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx
index 2f8918b0713f2..b22eb92c322a0 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 { useEffect, useLayoutEffect, type ComponentProps, type FC } from "react";
+import {
+	type ComponentProps,
+	type FC,
+	useEffect,
+	useLayoutEffect,
+} from "react";
 import icons from "theme/icons.json";
 
 const custom = [
@@ -33,17 +38,17 @@ const EmojiPicker: FC<EmojiPickerProps> = (props) => {
 	 * Reference: https://github.com/missive/emoji-mart/pull/806
 	 */
 	useEffect(() => {
-		const picker = document.querySelector("em-emoji-picker")?.shadowRoot
-		if(!picker) {
-			return
+		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)
-	}, [])
+		const css = document.createElement("style");
+		css.textContent = ".emoji-mart-emoji img { width: 100% }";
+		picker.appendChild(css);
+	}, []);
 
 	return (
-			<EmojiMart
+		<EmojiMart
 			theme="dark"
 			set="apple"
 			emojiVersion="15"

From dce737c90709592574df9553dc3d0cf22ab072fb Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 7 Feb 2025 14:38:27 +0000
Subject: [PATCH 3/3] Add issue in the comments

---
 site/src/components/IconField/EmojiPicker.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx
index b22eb92c322a0..476e24f293756 100644
--- a/site/src/components/IconField/EmojiPicker.tsx
+++ b/site/src/components/IconField/EmojiPicker.tsx
@@ -35,7 +35,8 @@ 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.
 	 *
-	 * Reference: https://github.com/missive/emoji-mart/pull/806
+	 * 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;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16492.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16492.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16492.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16492.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>