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
@@ -37,4 +41,5 @@ limitations under the License.
                 line-height: $font-14px;
             }
         }
+    }
 }

src/components/views/messages/CallEvent.tsx

@@ -31,22 +31,27 @@ 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}
+                            { sender }
                         </div>
                         <div className="mx_CallEvent_type">
                             { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") }
                         </div>
                     </div>
                 </div>
+                { content }
+            </div>
         );
     }
 }