Use a somewhat sane visual layout

Author: jryans

res/css/views/right_panel/_TimelineCard.scss

@@ -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.
@@ -35,6 +35,12 @@ limitations under the License.
         }
     }
 
+    .mx_TimelineCard_timeline {
+        overflow: hidden;
+        position: relative; // offset parent for jump to bottom button
+        flex: 1;
+    }
+
     .mx_AutoHideScrollbar {
         padding-right: 10px;
         width: calc(100% - 10px);
@@ -119,9 +125,3 @@ limitations under the License.
         flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
     }
 }
-
-.mx_TimelineCard_timeline {
-    overflow: hidden;
-    position: relative; // offset parent for jump to bottom button
-    flex: 1;
-}

res/css/views/rooms/_RoomPreviewBar.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 - 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.
@@ -98,6 +98,14 @@ limitations under the License.
     }
 }
 
+// With maximised widgets, the panel fits in better when rounded
+.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
+    margin: $container-gap-width;
+    margin-right: calc($container-gap-width / 2); // Shared with right panel
+    margin-top: 0; // Already covered by apps drawer
+    border-radius: 8px;
+}
+
 .mx_RoomPreviewBar_dialog {
     margin: auto;
     box-sizing: content;

src/components/structures/RoomView.tsx

@@ -2104,9 +2104,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const showChatEffects = SettingsStore.getValue('showChatEffects');
 
         let mainSplitBody;
+        let mainSplitContentClassName;
         // Decide what to show in the main split
         switch (this.state.mainSplitContentType) {
             case MainSplitContentType.Timeline:
+                mainSplitContentClassName = "mx_MainSplit_timeline";
                 mainSplitBody = <>
                     <Measured
                         sensor={this.roomViewBody.current}
@@ -2126,6 +2128,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 </>;
                 break;
             case MainSplitContentType.MaximisedWidget:
+                mainSplitContentClassName = "mx_MainSplit_maximisedWidget";
                 mainSplitBody = <>
                     <AppsDrawer
                         room={this.state.room}
@@ -2139,6 +2142,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             case MainSplitContentType.Video: {
                 const app = getVoiceChannel(this.state.room.roomId);
                 if (!app) break;
+                mainSplitContentClassName = "mx_MainSplit_video";
                 mainSplitBody = <AppTile
                     app={app}
                     room={this.state.room}
@@ -2150,6 +2154,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 />;
             }
         }
+        const mainSplitContentClasses = classNames("mx_RoomView_body", mainSplitContentClassName);
+
         let excludedRightPanelPhaseButtons = [RightPanelPhases.Timeline];
         let onAppsClick = this.onAppsClick;
         let onForgetClick = this.onForgetClick;
@@ -2165,6 +2171,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             onForgetClick = null;
             onSearchClick = null;
         }
+
         return (
             <RoomContext.Provider value={this.state}>
                 <main className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
@@ -2186,7 +2193,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
-                            <div className="mx_RoomView_body" ref={this.roomViewBody} data-layout={this.state.layout}>
+                            <div className={mainSplitContentClasses} ref={this.roomViewBody} data-layout={this.state.layout}>
                                 { mainSplitBody }
                             </div>
                         </MainSplit>