recycle EventTile css to make history items look mostly similar

res/css/views/dialogs/_MessageEditHistoryDialog.scss

@@ -28,23 +28,11 @@ limitations under the License.
 .mx_MessageEditHistoryDialog_edits {
     list-style-type: none;
     font-size: 14px;
+    padding: 0;
+    color: $primary-fg-color;
 
-    &>li.edit {
-        margin: 10px 0;
-        display: flex;
-
-        &>.mx_MessageTimestamp {
-            flex: 0 0 50px;
-        }
-
-        &>p {
-            margin: 0;
-        }
-
-    }
-
-    ul, ol {
-        list-style-type: circle;
+    .mx_EventTile_line, .mx_EventTile_content {
+        margin-right: 0px;
     }
 }
 

src/components/views/elements/EditHistoryMessage.js

@@ -46,17 +46,19 @@ export default class EditHistoryMessage extends React.Component {
         let contentContainer;
         if (mxEvent.getContent().msgtype === "m.emote") {
             const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
-            contentContainer = (<p ref="content">*&nbsp;
+            contentContainer = (<div className="mx_EventTile_content" ref="content">*&nbsp;
                 <span className="mx_MEmoteBody_sender">{ name }</span>
                 &nbsp;{contentElements}
-            </p>);
+            </div>);
         } else {
-            contentContainer = (<p ref="content">{contentElements}</p>);
+            contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>);
         }
         const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
-        return <li className="edit mx_EventTile_content">
-            <span className="mx_MessageTimestamp">{timestamp}</span>
-            { contentContainer }
+        return <li className="mx_EventTile">
+            <div className="mx_EventTile_line">
+                <span className="mx_MessageTimestamp">{timestamp}</span>
+                { contentContainer }
+            </div>
         </li>;
     }
 }