From 75a7ccda72a4b7622fa256fb73074343ddd56f66 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 29 Aug 2026 13:36:05 +0300
Subject: [PATCH] Fix Plus Server suggestion page overflow

---
 .../routes/plus.suggestions.module.css              | 13 +++++++++++++
 .../plus-suggestions/routes/plus.suggestions.tsx    |  6 ++++--
 .../2026-08-29-plus-suggestion-name-overlap.md      |  5 +++++
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 changelog/2026-08-29-plus-suggestion-name-overlap.md

diff --git a/app/features/plus-suggestions/routes/plus.suggestions.module.css b/app/features/plus-suggestions/routes/plus.suggestions.module.css
index b6d685839..d6577c43e 100644
--- a/app/features/plus-suggestions/routes/plus.suggestions.module.css
+++ b/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 {
diff --git a/app/features/plus-suggestions/routes/plus.suggestions.tsx b/app/features/plus-suggestions/routes/plus.suggestions.tsx
index 59ac6864f..8ea2799b3 100644
--- a/app/features/plus-suggestions/routes/plus.suggestions.tsx
+++ b/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>
diff --git a/changelog/2026-08-29-plus-suggestion-name-overlap.md b/changelog/2026-08-29-plus-suggestion-name-overlap.md
new file mode 100644
index 000000000..2acc6ae0b
--- /dev/null
+++ b/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