From 0768f03097777c950c61cde3f6e6b96b9f1847cf Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 22 Jul 2021 17:11:23 +0200
Subject: [PATCH 1/2] Migrate ViewSourceEvent to TypeScript

---
 res/css/views/messages/_ViewSourceEvent.scss  |  4 ++-
 res/css/views/rooms/_EventBubbleTile.scss     |  5 +++-
 ...ViewSourceEvent.js => ViewSourceEvent.tsx} | 25 +++++++++++--------
 3 files changed, 21 insertions(+), 13 deletions(-)
 rename src/components/views/messages/{ViewSourceEvent.js => ViewSourceEvent.tsx} (87%)

diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss
index 66825030e0..b0e40a5152 100644
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@@ -43,8 +43,10 @@ limitations under the License.
         margin-bottom: 7px;
         mask-image: url('$(res)/img/feather-customised/minimise.svg');
     }
+}
 
-    &:hover .mx_ViewSourceEvent_toggle {
+.mx_EventTile:hover {
+    .mx_ViewSourceEvent_toggle {
         visibility: visible;
     }
 }
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index cac463d4db..f603042b59 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -219,13 +219,16 @@ limitations under the License.
 
         display: flex;
         align-items: center;
-        justify-content: center;
 
         .mx_EventTile_avatar {
             position: static;
             order: -1;
             margin-right: 5px;
         }
+
+        .mx_EventTile_e2eIcon {
+            margin-left: 9px;
+        }
     }
 
     & ~ .mx_EventListSummary {
diff --git a/src/components/views/messages/ViewSourceEvent.js b/src/components/views/messages/ViewSourceEvent.tsx
similarity index 87%
rename from src/components/views/messages/ViewSourceEvent.js
rename to src/components/views/messages/ViewSourceEvent.tsx
index 5a5c015dcf..488f8de5df 100644
--- a/src/components/views/messages/ViewSourceEvent.js
+++ b/src/components/views/messages/ViewSourceEvent.tsx
@@ -15,18 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { MatrixEvent } from 'matrix-js-sdk/src';
 import classNames from 'classnames';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
-@replaceableComponent("views.messages.ViewSourceEvent")
-export default class ViewSourceEvent extends React.PureComponent {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
-    };
+interface IProps {
+    mxEvent: MatrixEvent;
+}
 
+interface IState {
+    expanded: boolean;
+}
+
+@replaceableComponent("views.messages.ViewSourceEvent")
+export default class ViewSourceEvent extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);
 
@@ -35,7 +38,7 @@ export default class ViewSourceEvent extends React.PureComponent {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         const { mxEvent } = this.props;
 
         const client = MatrixClientPeg.get();
@@ -46,15 +49,15 @@ export default class ViewSourceEvent extends React.PureComponent {
         }
     }
 
-    onToggle = (ev) => {
+    private onToggle = (ev: React.MouseEvent) => {
         ev.preventDefault();
         const { expanded } = this.state;
         this.setState({
             expanded: !expanded,
         });
-    }
+    };
 
-    render() {
+    public render(): React.ReactNode {
         const { mxEvent } = this.props;
         const { expanded } = this.state;
 

From e2688cd5e0ee5e35da7d046e9a03d9a5e7095ec4 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 26 Jul 2021 16:53:37 +0200
Subject: [PATCH 2/2] Left align unbubbled events

---
 res/css/views/rooms/_EventBubbleTile.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index b281c16107..95186af761 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -232,7 +232,7 @@ limitations under the License.
 
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: start;
         padding: 5px 0;
 
         .mx_EventTile_avatar {
@@ -244,6 +244,12 @@ limitations under the License.
         .mx_EventTile_e2eIcon {
             margin-left: 9px;
         }
+
+        .mx_EventTile_line > a {
+            right: auto;
+            top: -15px;
+            left: -68px;
+        }
     }
 
     & ~ .mx_EventListSummary {