Fix thread summary layout for narrow right panel timeline (#7838)

src/components/structures/ThreadView.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 - 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -49,6 +49,7 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import FileDropTarget from "./FileDropTarget";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
+import Measured from '../views/elements/Measured';
 
 interface IProps {
     room: Room;
@@ -60,12 +61,14 @@ interface IProps {
     initialEvent?: MatrixEvent;
     isInitialEventHighlighted?: boolean;
 }
+
 interface IState {
     thread?: Thread;
     lastThreadReply?: MatrixEvent;
     layout: Layout;
     editState?: EditorStateTransfer;
     replyToEvent?: MatrixEvent;
+    narrow: boolean;
 }
 
 @replaceableComponent("structures.ThreadView")
@@ -74,14 +77,16 @@ export default class ThreadView extends React.Component<IProps, IState> {
     public context!: React.ContextType<typeof RoomContext>;
 
     private dispatcherRef: string;
-    private timelinePanelRef = createRef<TimelinePanel>();
-    private cardRef = createRef<HTMLDivElement>();
     private readonly layoutWatcherRef: string;
+    private timelinePanel = createRef<TimelinePanel>();
+    private card = createRef<HTMLDivElement>();
 
     constructor(props: IProps) {
         super(props);
+
         this.state = {
             layout: SettingsStore.getValue("layout"),
+            narrow: false,
         };
 
         this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[,,, value]) =>
@@ -131,7 +136,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                     editState: payload.event ? new EditorStateTransfer(payload.event) : null,
                 }, () => {
                     if (payload.event) {
-                        this.timelinePanelRef.current?.scrollToEventIfNeeded(payload.event.getId());
+                        this.timelinePanel.current?.scrollToEventIfNeeded(payload.event.getId());
                     }
                 });
                 break;
@@ -181,7 +186,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 if (!thread.initialEventsFetched) {
                     await thread.fetchInitialEvents();
                 }
-                this.timelinePanelRef.current?.refreshTimeline();
+                this.timelinePanel.current?.refreshTimeline();
             });
         }
     };
@@ -209,6 +214,10 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
+    private onMeasurement = (narrow: boolean): void => {
+        this.setState({ narrow });
+    };
+
     private onKeyDown = (ev: KeyboardEvent) => {
         let handled = false;
 
@@ -230,15 +239,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    private renderThreadViewHeader = (): JSX.Element => {
-        return <div className="mx_ThreadPanel__header">
-            <span>{ _t("Thread") }</span>
-            <ThreadListContextMenu
-                mxEvent={this.props.mxEvent}
-                permalinkCreator={this.props.permalinkCreator} />
-        </div>;
-    };
-
     private onPaginationRequest = async (
         timelineWindow: TimelineWindow | null,
         direction = Direction.Backward,
@@ -284,6 +284,15 @@ export default class ThreadView extends React.Component<IProps, IState> {
         };
     }
 
+    private renderThreadViewHeader = (): JSX.Element => {
+        return <div className="mx_ThreadPanel__header">
+            <span>{ _t("Thread") }</span>
+            <ThreadListContextMenu
+                mxEvent={this.props.mxEvent}
+                permalinkCreator={this.props.permalinkCreator} />
+        </div>;
+    };
+
     public render(): JSX.Element {
         const highlightedEventId = this.props.isInitialEventHighlighted
             ? this.props.initialEvent?.getId()
@@ -303,20 +312,24 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 timelineRenderingType: TimelineRenderingType.Thread,
                 threadId: this.state.thread?.id,
                 liveTimeline: this.state?.thread?.timelineSet?.getLiveTimeline(),
+                narrow: this.state.narrow,
             }}>
-
                 <BaseCard
                     className="mx_ThreadView mx_ThreadPanel"
                     onClose={this.props.onClose}
                     withoutScrollContainer={true}
                     header={this.renderThreadViewHeader()}
-                    ref={this.cardRef}
+                    ref={this.card}
                     onKeyDown={this.onKeyDown}
                 >
+                    <Measured
+                        sensor={this.card.current}
+                        onMeasurement={this.onMeasurement}
+                    />
                     { this.state.thread && <div className="mx_ThreadView_timelinePanelWrapper">
-                        <FileDropTarget parent={this.cardRef.current} onFileDrop={this.onFileDrop} />
+                        <FileDropTarget parent={this.card.current} onFileDrop={this.onFileDrop} />
                         <TimelinePanel
-                            ref={this.timelinePanelRef}
+                            ref={this.timelinePanel}
                             showReadReceipts={false} // Hide the read receipts
                             // until homeservers speak threads language
                             manageReadReceipts={true}