From a1375c8ab72eb93ecd3554a4745243481932fd15 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sat, 12 Oct 2024 00:29:40 -0400
Subject: [PATCH] prevent usernames from overflowing the reactions hover-list

---
 .../src/components/MkReactionsViewer.details.vue         | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue
index 60118fadd2..efca61a035 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.details.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.users">
 			<div v-for="u in users" :key="u.id" :class="$style.user">
 				<MkAvatar :class="$style.avatar" :user="u"/>
-				<MkUserName :user="u" :nowrap="true"/>
+				<MkUserName :user="u" :nowrap="true" :class="$style.username"/>
 			</div>
 			<div v-if="count > 10" :class="$style.more">+{{ count - 10 }}</div>
 		</div>
@@ -98,4 +98,11 @@ function getReactionName(reaction: string): string {
 .more {
 	padding-top: 4px;
 }
+
+.username {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+	overflow: hidden;
+}
 </style>