web/roomview: render room topic in header

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>

web/src/ui/roomview/RoomView.css

@@ -5,7 +5,7 @@ div.room-view {
 	display: grid;
 	outline: none;
 	grid-template:
-		"header" 3rem
+		"header" 3.5rem
 		"messageview" 1fr
 		"autocomplete" 0
 		"input" auto

web/src/ui/roomview/RoomViewHeader.css

@@ -6,12 +6,26 @@ div.room-header {
 	border-bottom: 1px solid var(--border-color);
 	overflow: hidden;
 
-	> div.room-name {
-		font-weight: bold;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-wrap: nowrap;
+	> div.room-name-and-topic {
 		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		> div.room-name, > div.room-topic {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			text-wrap: nowrap;
+		}
+
+		> div.room-name {
+			font-weight: bold;
+		}
+
+		> div.room-topic {
+			font-size: 0.85rem;
+			color: var(--secondary-text-color);
+		}
 	}
 
 	> button.back {

web/src/ui/roomview/RoomViewHeader.tsx

@@ -52,8 +52,13 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 			onClick={use(LightboxContext)}
 			alt=""
 		/>
-		<div className="room-name">
-			{roomMeta.name ?? roomMeta.room_id}
+		<div className="room-name-and-topic">
+			<div className="room-name">
+				{roomMeta.name ?? roomMeta.room_id}
+			</div>
+			{roomMeta.topic && <div className="room-topic">
+				{roomMeta.topic}
+			</div>}
 		</div>
 		<div className="right-buttons">
 			<button