diff --git a/web/src/ui/timeline/content/MemberBody.tsx b/web/src/ui/timeline/content/MemberBody.tsx
index dccaf1f..23fcecb 100644
--- a/web/src/ui/timeline/content/MemberBody.tsx
+++ b/web/src/ui/timeline/content/MemberBody.tsx
@@ -29,17 +29,25 @@ function useChangeDescription(
 		onClick={use(LightboxContext)!}
 		alt=""
 	/>
-	const targetElem = <>{content.avatar_url && targetAvatar} {content.displayname ?? target}</>
+	const targetElem = <>
+		{content.avatar_url && targetAvatar}
+		<span className="name">{content.displayname ?? target}</span>
+	</>
 	if (content.membership === prevContent?.membership) {
 		if (content.displayname !== prevContent.displayname) {
 			if (content.avatar_url !== prevContent.avatar_url) {
-				return "changed their displayname and avatar"
+				return <>changed their displayname and avatar</>
 			} else if (!content.displayname) {
-				return "removed their displayname"
+				return <>removed their displayname</>
 			} else if (!prevContent.displayname) {
-				return `set their displayname to ${content.displayname}`
+				return <>set their displayname to <span className="name">{content.displayname}</span></>
 			}
-			return `changed their displayname from ${prevContent.displayname} to ${content.displayname}`
+			return <>
+				changed their displayname from
+				<span className="name">{prevContent.displayname}</span>
+				to
+				<span className="name">{content.displayname}</span>
+			</>
 		} else if (content.avatar_url !== prevContent.avatar_url) {
 			if (!content.avatar_url) {
 				return "removed their avatar"
@@ -87,7 +95,7 @@ const MemberBody = ({ event, sender }: EventContentProps) => {
 	const content = event.content as MemberEventContent
 	const prevContent = event.unsigned.prev_content as MemberEventContent | undefined
 	return <div className="member-body">
-		<span className="sender-name">{sender?.content.displayname ?? event.sender}</span>
+		<span className="name sender-name">{sender?.content.displayname ?? event.sender}</span>
 		<span className="change-description">
 			{useChangeDescription(event.sender, event.state_key as UserID, content, prevContent)}
 		</span>
diff --git a/web/src/ui/timeline/content/index.css b/web/src/ui/timeline/content/index.css
index 09efa0d..895c116 100644
--- a/web/src/ui/timeline/content/index.css
+++ b/web/src/ui/timeline/content/index.css
@@ -27,6 +27,20 @@ div.member-body {
 	display: flex;
 	align-items: center;
 	gap: .25rem;
+
+	span.name {
+		unicode-bidi: isolate;
+		max-width: 40ch;
+		text-wrap: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	> span.change-description {
+		display: flex;
+		align-items: center;
+		gap: .25rem;
+	}
 }
 
 div.message-text {