Fix Plus Server suggestion page overflow

app/features/plus-suggestions/routes/plus.suggestions.module.css

@@ -49,10 +49,22 @@
 	gap: var(--s-2);
 }
 
+.suggestedUserHeading {
+	min-width: 0;
+}
+
 .suggestedUserTrigger {
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
+	min-width: 0;
+	max-width: 100%;
+}
+
+.suggestedUsername {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .comment {
@@ -64,6 +76,7 @@
 .commentButton {
 	max-width: 12rem;
 	margin-inline-start: auto;
+	flex-shrink: 0;
 }
 
 .viewCommentsAction {

app/features/plus-suggestions/routes/plus.suggestions.tsx

@@ -198,11 +198,13 @@ function SuggestedUser({
 	return (
 		<div className="stack md">
 			<div className={styles.suggestedUserInfo}>
-				<h2>
+				<h2 className={styles.suggestedUserHeading}>
 					<UserCard userId={suggestion.suggested.id}>
 						<span className={styles.suggestedUserTrigger}>
 							<Avatar user={suggestion.suggested} size="md" />
-							{suggestion.suggested.username}
+							<span className={styles.suggestedUsername}>
+								{suggestion.suggested.username}
+							</span>
 						</span>
 					</UserCard>
 				</h2>

changelog/2026-08-29-plus-suggestion-name-overlap.md

@@ -0,0 +1,5 @@
+---
+navItem: plus
+type: bug
+---
+Long usernames on the suggestions page no longer overlap the "Comment" button