Fix thread summary layout for narrow right panel timeline

res/css/views/right_panel/_TimelineCard.scss

@@ -58,6 +58,12 @@ limitations under the License.
         padding-right: 36px;
     }
 
+    .mx_EventTile:not([data-layout="bubble"]) .mx_ThreadInfo {
+        margin-left: 36px;
+        margin-right: 0;
+        max-width: min(calc(100% - 36px), 600px);
+    }
+
     .mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
         margin-left: 36px;
     }

res/css/views/rooms/_EventTile.scss

@@ -723,7 +723,7 @@ $left-gutter: 64px;
 .mx_ThreadInfo {
     min-width: 267px;
     max-width: min(calc(100% - 64px), 600px);
-    width: auto;
+    width: fit-content;
     height: 40px;
     position: relative;
     background-color: $system;
@@ -777,6 +777,12 @@ $left-gutter: 64px;
     }
 }
 
+.mx_MessagePanel_narrow .mx_ThreadInfo {
+    min-width: initial;
+    max-width: initial;
+    width: initial;
+}
+
 .mx_ThreadInfo_content {
     text-overflow: ellipsis;
     overflow: hidden;

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.
@@ -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;
@@ -262,17 +263,19 @@ class FilePanel extends React.Component<IProps, IState> {
                         onClose={this.props.onClose}
                         withoutScrollContainer
                     >
-                        <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
-                        <TimelinePanel
-                            manageReadReceipts={false}
-                            manageReadMarkers={false}
-                            timelineSet={this.state.timelineSet}
-                            showUrlPreview={false}
-                            onPaginationRequest={this.onPaginationRequest}
-                            resizeNotifier={this.props.resizeNotifier}
-                            empty={emptyState}
-                            layout={Layout.Group}
-                        />
+                        <Measured>
+                            <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
+                            <TimelinePanel
+                                manageReadReceipts={false}
+                                manageReadMarkers={false}
+                                timelineSet={this.state.timelineSet}
+                                showUrlPreview={false}
+                                onPaginationRequest={this.onPaginationRequest}
+                                resizeNotifier={this.props.resizeNotifier}
+                                empty={emptyState}
+                                layout={Layout.Group}
+                            />
+                        </Measured>
                     </BaseCard>
                 </RoomContext.Provider>
             );

src/components/structures/MessagePanel.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2016 - 2021 The Matrix.org Foundation C.I.C.
+Copyright 2016 - 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.
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { createRef, KeyboardEvent, ReactNode, SyntheticEvent, TransitionEvent } from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { EventType } from 'matrix-js-sdk/src/@types/event';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
@@ -1012,11 +1013,15 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             />;
         }
 
+        const classes = classNames(this.props.className, {
+            "mx_MessagePanel_narrow": this.context.narrow,
+        });
+
         return (
             <ErrorBoundary>
                 <ScrollPanel
                     ref={this.scrollPanel}
-                    className={this.props.className}
+                    className={classes}
                     onScroll={this.props.onScroll}
                     onUserScroll={this.props.onUserScroll}
                     onFillRequest={this.props.onFillRequest}

src/components/structures/NotificationPanel.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2016, 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2016 - 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.
@@ -25,6 +25,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 {
     onClose(): void;
@@ -36,6 +37,7 @@ interface IProps {
 @replaceableComponent("structures.NotificationPanel")
 export default class NotificationPanel extends React.PureComponent<IProps> {
     static contextType = RoomContext;
+
     render() {
         const emptyState = (<div className="mx_RightPanel_empty mx_NotificationPanel_empty">
             <h2>{ _t("You're all caught up") }</h2>
@@ -47,15 +49,17 @@ export default class NotificationPanel extends React.PureComponent<IProps> {
         if (timelineSet) {
             // wrap a TimelinePanel with the jump-to-event bits turned off.
             content = (
-                <TimelinePanel
-                    manageReadReceipts={false}
-                    manageReadMarkers={false}
-                    timelineSet={timelineSet}
-                    showUrlPreview={false}
-                    empty={emptyState}
-                    alwaysShowTimestamps={true}
-                    layout={Layout.Group}
-                />
+                <Measured>
+                    <TimelinePanel
+                        manageReadReceipts={false}
+                        manageReadMarkers={false}
+                        timelineSet={timelineSet}
+                        showUrlPreview={false}
+                        empty={emptyState}
+                        alwaysShowTimestamps={true}
+                        layout={Layout.Group}
+                    />
+                </Measured>
             );
         } else {
             logger.error("No notifTimelineSet available!");

src/components/structures/RoomView.tsx

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2018, 2019 New Vector 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.
@@ -104,6 +104,7 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { JoinRoomPayload } from "../../dispatcher/payloads/JoinRoomPayload";
 import { DoAfterSyncPreparedPayload } from '../../dispatcher/payloads/DoAfterSyncPreparedPayload';
 import FileDropTarget from './FileDropTarget';
+import Measured from '../views/elements/Measured';
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -211,6 +212,7 @@ export interface IRoomState {
     timelineRenderingType: TimelineRenderingType;
     threadId?: string;
     liveTimeline?: EventTimeline;
+    narrow: boolean;
 }
 
 @replaceableComponent("structures.RoomView")
@@ -271,6 +273,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             mainSplitContentType: MainSplitContentType.Timeline,
             timelineRenderingType: TimelineRenderingType.Room,
             liveTimeline: undefined,
+            narrow: false,
         };
 
         this.dispatcherRef = dis.register(this.onAction);
@@ -2083,7 +2086,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const showChatEffects = SettingsStore.getValue('showChatEffects');
 
         // Decide what to show in the main split
-        let mainSplitBody = <React.Fragment>
+        let mainSplitBody = <Measured>
             { auxPanel }
             <div className={timelineClasses}>
                 <FileDropTarget parent={this.roomView.current} onFileDrop={this.onFileDrop} />
@@ -2095,7 +2098,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             { statusBarArea }
             { previewBar }
             { messageComposer }
-        </React.Fragment>;
+        </Measured>;
 
         switch (this.state.mainSplitContentType) {
             case MainSplitContentType.Timeline:

src/components/structures/ThreadPanel.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.
@@ -37,6 +37,7 @@ import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
 import TimelinePanel from './TimelinePanel';
 import { Layout } from '../../settings/enums/Layout';
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
+import Measured from '../views/elements/Measured';
 
 async function getThreadTimelineSet(
     client: MatrixClient,
@@ -298,28 +299,30 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                 withoutScrollContainer={true}
             >
                 { timelineSet && (
-                    <TimelinePanel
-                        ref={ref}
-                        showReadReceipts={false} // No RR support in thread's MVP
-                        manageReadReceipts={false} // No RR support in thread's MVP
-                        manageReadMarkers={false} // No RM support in thread's MVP
-                        sendReadReceiptOnLoad={false} // No RR support in thread's MVP
-                        timelineSet={timelineSet}
-                        showUrlPreview={true}
-                        empty={<EmptyThread
-                            filterOption={filterOption}
-                            showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}
-                        />}
-                        alwaysShowTimestamps={true}
-                        layout={Layout.Group}
-                        hideThreadedMessages={false}
-                        hidden={false}
-                        showReactions={false}
-                        className="mx_RoomView_messagePanel mx_GroupLayout"
-                        membersLoaded={true}
-                        permalinkCreator={permalinkCreator}
-                        disableGrouping={true}
-                    />
+                    <Measured>
+                        <TimelinePanel
+                            ref={ref}
+                            showReadReceipts={false} // No RR support in thread's MVP
+                            manageReadReceipts={false} // No RR support in thread's MVP
+                            manageReadMarkers={false} // No RM support in thread's MVP
+                            sendReadReceiptOnLoad={false} // No RR support in thread's MVP
+                            timelineSet={timelineSet}
+                            showUrlPreview={true}
+                            empty={<EmptyThread
+                                filterOption={filterOption}
+                                showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}
+                            />}
+                            alwaysShowTimestamps={true}
+                            layout={Layout.Group}
+                            hideThreadedMessages={false}
+                            hidden={false}
+                            showReactions={false}
+                            className="mx_RoomView_messagePanel mx_GroupLayout"
+                            membersLoaded={true}
+                            permalinkCreator={permalinkCreator}
+                            disableGrouping={true}
+                        />
+                    </Measured>
                 ) }
             </BaseCard>
         </RoomContext.Provider>

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;
@@ -313,46 +314,48 @@ export default class ThreadView extends React.Component<IProps, IState> {
                     ref={this.cardRef}
                     onKeyDown={this.onKeyDown}
                 >
-                    { this.state.thread && <div className="mx_ThreadView_timelinePanelWrapper">
-                        <FileDropTarget parent={this.cardRef.current} onFileDrop={this.onFileDrop} />
-                        <TimelinePanel
-                            ref={this.timelinePanelRef}
-                            showReadReceipts={false} // Hide the read receipts
-                            // until homeservers speak threads language
-                            manageReadReceipts={true}
-                            manageReadMarkers={true}
-                            sendReadReceiptOnLoad={true}
-                            timelineSet={this.state?.thread?.timelineSet}
-                            showUrlPreview={true}
-                            // ThreadView doesn't support IRC layout at this time
-                            layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
-                            hideThreadedMessages={false}
-                            hidden={false}
-                            showReactions={true}
-                            className={messagePanelClassNames}
+                    <Measured>
+                        { this.state.thread && <div className="mx_ThreadView_timelinePanelWrapper">
+                            <FileDropTarget parent={this.cardRef.current} onFileDrop={this.onFileDrop} />
+                            <TimelinePanel
+                                ref={this.timelinePanelRef}
+                                showReadReceipts={false} // Hide the read receipts
+                                // until homeservers speak threads language
+                                manageReadReceipts={true}
+                                manageReadMarkers={true}
+                                sendReadReceiptOnLoad={true}
+                                timelineSet={this.state?.thread?.timelineSet}
+                                showUrlPreview={true}
+                                // ThreadView doesn't support IRC layout at this time
+                                layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
+                                hideThreadedMessages={false}
+                                hidden={false}
+                                showReactions={true}
+                                className={messagePanelClassNames}
+                                permalinkCreator={this.props.permalinkCreator}
+                                membersLoaded={true}
+                                editState={this.state.editState}
+                                eventId={this.props.initialEvent?.getId()}
+                                highlightedEventId={highlightedEventId}
+                                onUserScroll={this.onScroll}
+                                onPaginationRequest={this.onPaginationRequest}
+                            />
+                        </div> }
+
+                        { ContentMessages.sharedInstance().getCurrentUploads(threadRelation).length > 0 && (
+                            <UploadBar room={this.props.room} relation={threadRelation} />
+                        ) }
+
+                        { this.state?.thread?.timelineSet && (<MessageComposer
+                            room={this.props.room}
+                            resizeNotifier={this.props.resizeNotifier}
+                            relation={threadRelation}
+                            replyToEvent={this.state.replyToEvent}
                             permalinkCreator={this.props.permalinkCreator}
-                            membersLoaded={true}
-                            editState={this.state.editState}
-                            eventId={this.props.initialEvent?.getId()}
-                            highlightedEventId={highlightedEventId}
-                            onUserScroll={this.onScroll}
-                            onPaginationRequest={this.onPaginationRequest}
-                        />
-                    </div> }
-
-                    { ContentMessages.sharedInstance().getCurrentUploads(threadRelation).length > 0 && (
-                        <UploadBar room={this.props.room} relation={threadRelation} />
-                    ) }
-
-                    { this.state?.thread?.timelineSet && (<MessageComposer
-                        room={this.props.room}
-                        resizeNotifier={this.props.resizeNotifier}
-                        relation={threadRelation}
-                        replyToEvent={this.state.replyToEvent}
-                        permalinkCreator={this.props.permalinkCreator}
-                        e2eStatus={this.props.e2eStatus}
-                        compact={true}
-                    />) }
+                            e2eStatus={this.props.e2eStatus}
+                            compact={true}
+                        />) }
+                    </Measured>
                 </BaseCard>
             </RoomContext.Provider>
         );