diff --git a/web/settings/relationship/friend-list-row.css b/web/settings/relationship/friend-list-row.css
--- a/web/settings/relationship/friend-list-row.css
+++ b/web/settings/relationship/friend-list-row.css
@@ -7,6 +7,12 @@
   line-height: var(--line-height-display);
 }
 
+.usernameContainer {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .buttons {
   display: flex;
   flex-direction: row;
@@ -21,6 +27,7 @@
   cursor: pointer;
   background: none;
   border: none;
+  white-space: nowrap;
 }
 
 .destructive {
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -50,7 +50,7 @@
 
   return (
     <div className={css.container}>
-      {userInfo.username}
+      <div className={css.usernameContainer}>{userInfo.username}</div>
       <div className={css.buttons}>{buttons}</div>
     </div>
   );