From 1ff9ba241a879aa43024925e9e615f72c0f00256 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 21 Dec 2024 19:30:14 +0200
Subject: [PATCH] web/emojipicker: don't allow pack names to wrap

---
 web/src/ui/emojipicker/EmojiGroup.tsx  | 2 +-
 web/src/ui/emojipicker/EmojiPicker.css | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/ui/emojipicker/EmojiGroup.tsx b/web/src/ui/emojipicker/EmojiGroup.tsx
index db7a10c..da3ed3a 100644
--- a/web/src/ui/emojipicker/EmojiGroup.tsx
+++ b/web/src/ui/emojipicker/EmojiGroup.tsx
@@ -98,7 +98,7 @@ export const EmojiGroup = ({
 		style={{ containIntrinsicHeight: `${1.5 + Math.ceil(emojis.length / itemsPerRow) * rowSize}rem` }}
 	>
 		<h4 className="emoji-category-name">
-			{categoryName}
+			<span title={categoryName}>{categoryName}</span>
 			{pack && <button
 				className="emoji-category-add"
 				onClick={isWatched ? onClickUnsubscribePack : onClickSubscribePack}
diff --git a/web/src/ui/emojipicker/EmojiPicker.css b/web/src/ui/emojipicker/EmojiPicker.css
index bb81032..eaab885 100644
--- a/web/src/ui/emojipicker/EmojiPicker.css
+++ b/web/src/ui/emojipicker/EmojiPicker.css
@@ -166,6 +166,13 @@ div.emoji-picker, div.sticker-picker {
 		display: flex;
 		align-items: center;
 
+		> span {
+			flex: 1;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
 		> button {
 			margin-left: .25rem;
 			font-size: .8rem;