Better positioning for unbubbled events in timeline

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;
     }
 }

res/css/views/rooms/_EventBubbleTile.scss

@@ -267,14 +267,24 @@ limitations under the License.
 
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: start;
     padding: 5px 0;
 
     .mx_EventTile_avatar {
         position: static;
         order: -1;
         margin-right: 5px;
     }
+
+    .mx_EventTile_e2eIcon {
+        margin-left: 9px;
+    }
+
+    .mx_EventTile_line > a {
+        right: auto;
+        top: -15px;
+        left: -68px;
+    }
 }
 
 .mx_EventListSummary[data-layout=bubble] {

src/components/views/messages/ViewSourceEvent.js → 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;