web/rightpanel: show user ID on hover in member list

tulir · Dec 8, 2024 · 08f1f1b · 08f1f1b
1 parent e9f146e
commit 08f1f1b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git 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
@@ -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;
+
+			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;
+				}
+			}
 
-			> span.displayname {
+			> 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);
 			}