From 08f1f1b44601f26d1d5d62d1f0c18d4655693502 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Mon, 9 Dec 2024 00:29:15 +0200
Subject: [PATCH] web/rightpanel: show user ID on hover in member list

---
 web/src/ui/rightpanel/MemberList.tsx |  3 +-
 web/src/ui/rightpanel/RightPanel.css | 44 +++++++++++++++++++++++++---
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/web/src/ui/rightpanel/MemberList.tsx b/web/src/ui/rightpanel/MemberList.tsx
index 3da42b1..a22b39c 100644
--- a/web/src/ui/rightpanel/MemberList.tsx
+++ b/web/src/ui/rightpanel/MemberList.tsx
@@ -37,7 +37,8 @@ const MemberRow = ({ evt, onClick }: MemberRowProps) => {
 			alt=""
 			loading="lazy"
 		/>
-		<span className="displayname">{getDisplayname(userID, content)}</span>
+		<div className="displayname">{getDisplayname(userID, content)}</div>
+		<div className="user-id">{userID}</div>
 	</div>
 }
 
diff --git a/web/src/ui/rightpanel/RightPanel.css b/web/src/ui/rightpanel/RightPanel.css
index 2dd0cbe..6f15003 100644
--- a/web/src/ui/rightpanel/RightPanel.css
+++ b/web/src/ui/rightpanel/RightPanel.css
@@ -210,23 +210,59 @@ div.right-panel-content.members {
 		overflow: auto;
 
 		> div.member {
-			display: flex;
-			align-items: center;
-			gap: .5rem;
+			display: grid;
+			column-gap: .5rem;
 			cursor: var(--clickable-cursor);
 
 			content-visibility: auto;
 			contain-intrinsic-height: 3rem;
 			height: 3rem;
 			padding: .25rem;
+			align-items: center;
 
-			> span.displayname {
+			grid-template:
+				"avatar  displayname" 3rem
+				/ 2.5rem 1fr;
+
+			&:hover {
+				grid-template:
+					"avatar  displayname" auto
+					"avatar  userid"      auto
+					/ 2.5rem 1fr;
+
+				> div.user-id {
+					display: block;
+					align-self: start;
+				}
+
+				> div.displayname {
+					align-self: end;
+				}
+			}
+
+			> div.displayname, > div.user-id {
 				overflow: hidden;
 				text-wrap: nowrap;
 				text-overflow: ellipsis;
 				user-select: none;
 			}
 
+			> div.displayname {
+				grid-area: displayname;
+			}
+
+			> img.avatar {
+				grid-area: avatar;
+			}
+
+			> div.user-id {
+				grid-area: userid;
+				font-family: var(--monospace-font-stack);
+				font-size: .75rem;
+				opacity: .7;
+				display: none;
+			}
+
 			&:hover, &:focus {
 				background-color: var(--light-hover-color);
 			}