From e7504153ef37678a844a621c20e856a4863e3a92 Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner.evans@automattic.com>
Date: Sun, 8 Dec 2024 20:09:17 -0700
Subject: [PATCH] web/timeline/member: add hover text, make smaller, and show
 in secondary text color

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>
---
 web/src/ui/timeline/content/MemberBody.tsx | 8 +++++---
 web/src/ui/timeline/content/index.css      | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/timeline/content/MemberBody.tsx b/web/src/ui/timeline/content/MemberBody.tsx
index 23fcecb2..271fc4d8 100644
--- a/web/src/ui/timeline/content/MemberBody.tsx
+++ b/web/src/ui/timeline/content/MemberBody.tsx
@@ -44,9 +44,9 @@ function useChangeDescription(
 			}
 			return <>
 				changed their displayname from
-				<span className="name">{prevContent.displayname}</span>
+				<span className="name" title={prevContent.displayname}>{prevContent.displayname}</span>
 				to
-				<span className="name">{content.displayname}</span>
+				<span className="name" title={content.displayname}>{content.displayname}</span>
 			</>
 		} else if (content.avatar_url !== prevContent.avatar_url) {
 			if (!content.avatar_url) {
@@ -95,7 +95,9 @@ 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="name sender-name">{sender?.content.displayname ?? event.sender}</span>
+		<span className="name sender-name" title={sender?.content.displayname ?? event.sender}>
+			{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 7d0de136..05759b93 100644
--- a/web/src/ui/timeline/content/index.css
+++ b/web/src/ui/timeline/content/index.css
@@ -27,6 +27,8 @@ div.member-body {
 	display: flex;
 	align-items: center;
 	gap: .25rem;
+	font-size: 0.9rem;
+	color: var(--secondary-text-color);
 
 	span.name {
 		unicode-bidi: isolate;