Prevent friend request username from overflowing

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;

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">