From 7cb7710cc336dc1f93e896cb7e03300815d1855e Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Fri, 20 Mar 2026 04:28:47 +0100
Subject: [PATCH] Prevent friend request username from overflowing

---
 app/features/friends/routes/friends.module.css | 6 ++++++
 app/features/friends/routes/friends.tsx        | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/features/friends/routes/friends.module.css b/app/features/friends/routes/friends.module.css
index 1f9321b4b..dd3b58731 100644
--- a/app/features/friends/routes/friends.module.css
+++ b/app/features/friends/routes/friends.module.css
@@ -13,6 +13,12 @@
 	font-weight: var(--weight-semi);
 }
 
+.userName {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .friendsListHeader {
 	display: flex;
 	align-items: center;
diff --git a/app/features/friends/routes/friends.tsx b/app/features/friends/routes/friends.tsx
index a67c1803b..9bf8b14d2 100644
--- a/app/features/friends/routes/friends.tsx
+++ b/app/features/friends/routes/friends.tsx
@@ -72,7 +72,7 @@ function IncomingRequestsSection() {
 								}}
 								size="xs"
 							/>
-							<span>{request.sender.username}</span>
+							<span className={styles.userName}>{request.sender.username}</span>
 						</div>
 						<div className="stack horizontal sm">
 							<Form method="post">