Add dialog to navigate long room topics (#8517)

src/components/views/rooms/RoomHeader.tsx

@@ -186,11 +186,10 @@ export default class RoomHeader extends React.Component<IProps, IState> {
             </ContextMenuTooltipButton>
         );
 
-        const topicElement = <RoomTopic room={this.props.room}>
-            { (topic, ref) => <div className="mx_RoomHeader_topic" ref={ref} title={topic} dir="auto">
-                { topic }
-            </div> }
-        </RoomTopic>;
+        const topicElement = <RoomTopic
+            room={this.props.room}
+            className="mx_RoomHeader_topic"
+        />;
 
         let roomAvatar;
         if (this.props.room) {

src/components/views/rooms/RoomPreviewCard.tsx

@@ -182,13 +182,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
             <RoomName room={room} />
         </h1>
         <RoomInfoLine room={room} />
-        <RoomTopic room={room}>
-            { (topic, ref) =>
-                topic ? <div className="mx_RoomPreviewCard_topic" ref={ref}>
-                    { topic }
-                </div> : null
-            }
-        </RoomTopic>
+        <RoomTopic room={room} className="mx_RoomPreviewCard_topic" />
         { room.getJoinRule() === "public" && <RoomFacePile room={room} /> }
         { notice ? <div className="mx_RoomPreviewCard_notice">
             { notice }