Reorganize HTML

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/messages/_CallEvent.scss

@@ -26,7 +26,11 @@ limitations under the License.
     max-width: 75%;
     box-sizing: border-box;
 
-    .mx_CallEvent_content {
+    .mx_CallEvent_info {
+        display: flex;
+        flex-direction: row;
+
+        .mx_CallEvent_info_basic {
             display: flex;
             flex-direction: column;
             margin-left: 10px; // To match mx_CallEvent
@@ -38,3 +42,4 @@ limitations under the License.
             }
         }
     }
+}

src/components/views/messages/CallEvent.tsx

@@ -31,14 +31,17 @@ export default class CallEvent extends React.Component<IProps> {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
 
+        let content;
+
         return (
             <div className="mx_CallEvent">
+                <div className="mx_CallEvent_info">
                     <MemberAvatar
                         member={event.sender}
                         width={32}
                         height={32}
                     />
-                <div className="mx_CallEvent_content">
+                    <div className="mx_CallEvent_info_basic">
                         <div>
                             { sender }
                         </div>
@@ -47,6 +50,8 @@ export default class CallEvent extends React.Component<IProps> {
                         </div>
                     </div>
                 </div>
+                { content }
+            </div>
         );
     }
 }