From 084a9f71413ed787ee33d4fb4540863c503d06f7 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 21 Dec 2024 00:00:52 +0200
Subject: [PATCH] web/roomview: use table correctly

---
 web/src/ui/roomview/RoomPreview.css |  2 +-
 web/src/ui/roomview/RoomPreview.tsx | 60 +++++++++++++++--------------
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/web/src/ui/roomview/RoomPreview.css b/web/src/ui/roomview/RoomPreview.css
index 33b8b3b..34ecbeb 100644
--- a/web/src/ui/roomview/RoomPreview.css
+++ b/web/src/ui/roomview/RoomPreview.css
@@ -39,7 +39,7 @@ div.room-view.preview > div.preview-inner {
 	> details.room-invite-meta {
 		width: 100%;
 
-		> table > tr > td:nth-of-type(2) {
+		> table > tbody > tr > td:nth-of-type(2) {
 			font-family: var(--monospace-font-stack);
 		}
 	}
diff --git a/web/src/ui/roomview/RoomPreview.tsx b/web/src/ui/roomview/RoomPreview.tsx
index 5eb9489..8718682 100644
--- a/web/src/ui/roomview/RoomPreview.tsx
+++ b/web/src/ui/roomview/RoomPreview.tsx
@@ -111,34 +111,38 @@ const RoomPreview = ({ roomID, via, alias, invite }: RoomPreviewProps) => {
 			{invite && <details className="room-invite-meta">
 				<summary>Invite metadata</summary>
 				<table>
-					<tr>
-						<td>Invited by</td>
-						<td>{invite.invited_by}</td>
-					</tr>
-					<tr>
-						<td>Room ID</td>
-						<td>{roomID}</td>
-					</tr>
-					<tr>
-						<td>Room alias</td>
-						<td>{invite.canonical_alias ?? summary?.canonical_alias}</td>
-					</tr>
-					<tr>
-						<td>Is direct</td>
-						<td>{invite.is_direct.toString()}</td>
-					</tr>
-					<tr>
-						<td>Encryption</td>
-						<td>{invite.encryption ?? summary?.encryption ?? summary?.["im.nheko.summary.encryption"]}</td>
-					</tr>
-					<tr>
-						<td>Join rule</td>
-						<td>{invite.join_rule ?? summary?.join_rule}</td>
-					</tr>
-					<tr>
-						<td>Timestamp</td>
-						<td>{invite.date}</td>
-					</tr>
+					<tbody>
+						<tr>
+							<td>Invited by</td>
+							<td>{invite.invited_by}</td>
+						</tr>
+						<tr>
+							<td>Room ID</td>
+							<td>{roomID}</td>
+						</tr>
+						<tr>
+							<td>Room alias</td>
+							<td>{invite.canonical_alias ?? summary?.canonical_alias}</td>
+						</tr>
+						<tr>
+							<td>Is direct</td>
+							<td>{invite.is_direct.toString()}</td>
+						</tr>
+						<tr>
+							<td>Encryption</td>
+							<td>
+								{invite.encryption ?? summary?.encryption ?? summary?.["im.nheko.summary.encryption"]}
+							</td>
+						</tr>
+						<tr>
+							<td>Join rule</td>
+							<td>{invite.join_rule ?? summary?.join_rule}</td>
+						</tr>
+						<tr>
+							<td>Timestamp</td>
+							<td>{invite.date}</td>
+						</tr>
+					</tbody>
 				</table>
 			</details>}
 			{invite?.invited_by && <MutualRooms client={client} userID={invite.invited_by}/>}