diff --git a/web/settings/relationship/friend-list-row.css b/web/settings/relationship/friend-list-row.css
index 0e85babcc..3c7a25a79 100644
--- a/web/settings/relationship/friend-list-row.css
+++ b/web/settings/relationship/friend-list-row.css
@@ -1,32 +1,39 @@
 .container {
   display: flex;
   justify-content: space-between;
   padding: 16px;
   color: var(--relationship-modal-color);
   font-size: var(--l-font-18);
   line-height: var(--line-height-display);
 }
 
+.usernameContainer {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .buttons {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
 }
 
 .button {
   font-size: var(--s-font-14);
   line-height: var(--line-height-text);
   color: var(--btn-bg-primary);
   cursor: pointer;
   background: none;
   border: none;
+  white-space: nowrap;
 }
 
 .destructive {
   color: var(--btn-bg-danger);
 }
 
 .edit_button {
   color: var(--relationship-modal-color);
 }
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
index 9cb457aba..af2b050f4 100644
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -1,59 +1,59 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt';
 import { userRelationshipStatus } from 'lib/types/relationship-types';
 
 import SWMansionIcon from '../../SWMansionIcon.react';
 import css from './friend-list-row.css';
 import type { UserRowProps } from './user-list.react';
 
 function FriendListRow(props: UserRowProps): React.Node {
   const { userInfo } = props;
 
   const { friendUser, unfriendUser } = useRelationshipCallbacks(userInfo.id);
   let buttons = null;
   if (userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT) {
     buttons = (
       <button
         className={classnames([css.button, css.destructive])}
         onClick={unfriendUser}
       >
         Cancel request
       </button>
     );
   } else if (
     userInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED
   ) {
     buttons = (
       <>
         <button className={css.button} onClick={friendUser}>
           Accept
         </button>
         <button
           className={classnames([css.button, css.destructive])}
           onClick={unfriendUser}
         >
           Reject
         </button>
       </>
     );
   } else if (userInfo.relationshipStatus === userRelationshipStatus.FRIEND) {
     buttons = (
       <button className={classnames([css.button, css.edit_button])}>
         <SWMansionIcon icon="edit" size={22} />
       </button>
     );
   }
 
   return (
     <div className={css.container}>
-      {userInfo.username}
+      <div className={css.usernameContainer}>{userInfo.username}</div>
       <div className={css.buttons}>{buttons}</div>
     </div>
   );
 }
 
 export default FriendListRow;