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

src/components/structures/FilePanel.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 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.
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import { Filter } from 'matrix-js-sdk/src/filter';
 import { EventTimelineSet, IRoomTimelineData } from "matrix-js-sdk/src/models/event-timeline-set";
 import { Direction } from "matrix-js-sdk/src/models/event-timeline";
@@ -35,6 +35,7 @@ import TimelinePanel from "./TimelinePanel";
 import Spinner from "../views/elements/Spinner";
 import { Layout } from "../../settings/enums/Layout";
 import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
+import Measured from '../views/elements/Measured';
 
 interface IProps {
     roomId: string;
@@ -44,6 +45,7 @@ interface IProps {
 
 interface IState {
     timelineSet: EventTimelineSet;
+    narrow: boolean;
 }
 
 /*
@@ -51,14 +53,17 @@ interface IState {
  */
 @replaceableComponent("structures.FilePanel")
 class FilePanel extends React.Component<IProps, IState> {
+    static contextType = RoomContext;
+
     // This is used to track if a decrypted event was a live event and should be
     // added to the timeline.
     private decryptingEvents = new Set<string>();
     public noRoom: boolean;
-    static contextType = RoomContext;
+    private card = createRef<HTMLDivElement>();
 
     state = {
         timelineSet: null,
+        narrow: false,
     };
 
     private onRoomTimeline = (
@@ -184,6 +189,10 @@ class FilePanel extends React.Component<IProps, IState> {
         }
     };
 
+    private onMeasurement = (narrow: boolean): void => {
+        this.setState({ narrow });
+    };
+
     public async updateTimelineSet(roomId: string): Promise<void> {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
@@ -256,12 +265,18 @@ class FilePanel extends React.Component<IProps, IState> {
                 <RoomContext.Provider value={{
                     ...this.context,
                     timelineRenderingType: TimelineRenderingType.File,
+                    narrow: this.state.narrow,
                 }}>
                     <BaseCard
                         className="mx_FilePanel"
                         onClose={this.props.onClose}
                         withoutScrollContainer
+                        ref={this.card}
                     >
+                        <Measured
+                            sensor={this.card.current}
+                            onMeasurement={this.onMeasurement}
+                        />
                         <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
                         <TimelinePanel
                             manageReadReceipts={false}