center avatar and name in chat

Author: supalarry

frontend/src/components/app/matches/Chat.vue

@@ -1,17 +1,17 @@
 <template>
   <!--  eslint-disable max-len -->
   <div class="chat md:w-full md:max-w-2xl md:shadow-md md:rounded-md md:p-4 md:flex md:flex-col md:justify-start">
-    <div class="w-1/2 flex items-center justify-between ml-auto">
-      <div v-if="user" class="-ml-6 text-center flex">
-        <div>
-          <ChatUser v-bind:match="user"></ChatUser>
+    <div class="flex items-center justify-center">
+      <div v-if="user" class="text-center flex">
+        <div class="flex-row">
+          <ChatUser class="mx-auto" v-bind:match="user"></ChatUser>
           <h1 class="text-gray-matcha opacity-75 text-sm">{{user.first_name}}</h1>
         </div>
         <div v-if="newMessageCount" class="ml-4 flex items-center justify-center">
           <h1 class="text-purple-matcha text-sm font-bold">{{newMessageCount}}</h1>
         </div>
       </div>
-      <div class="md:hidden cursor-pointer text-lg lg:text-2xl w-10 h-10 flex items-center justify-center"
+      <div class="md:hidden absolute right-0 cursor-pointer text-lg lg:text-2xl w-10 h-10 flex items-center justify-center"
            v-on:click="closeChat()">
         <h1 class="noSelect capitalize opacity-50">←</h1>
       </div>