chat message bubbles reformat

Author: supalarry

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

@@ -11,19 +11,25 @@
         <h1 class="noSelect capitalize opacity-50">←</h1>
       </div>
     </div>
-    <div class="messages rounded-md overflow-scroll pt-4 pb-2 w-full">
-      <div
-        v-bind:class="{
-        'flex': true,
-        'mt-1': true,
-        'justify-start': message.to_id === loggedInUserId,
-        'justify-end': message.to_id !== loggedInUserId}"
-        v-for="message in messages" :key="message.id">
-      <h1 v-if="message.to_id === loggedInUserId"
-          class="py-2 px-4 rounded-t-md rounded-br-md bg-purple-matcha text-white-matcha">{{message.content}}</h1>
-      <h1 v-else
-          class="py-2 px-4 rounded-t-md rounded-bl-md bg-green-500 text-white-matcha">{{message.content}}</h1>
-      </div>
+    <div v-if="messages" class="messages break-words rounded-md overflow-scroll pt-4 pb-2 w-full">
+      <h1 v-for="message in messages" :key="message.id"
+      v-bind:class="{
+        'py-2': true,
+        'px-4': true,
+        'mt-2': true,
+        'sm:w-48': true,
+        'lg:w-64': true,
+        'rounded-t-md': true,
+        'rounded-br-md': message.to_id === loggedInUserId,
+        'rounded-bl-md': message.to_id !== loggedInUserId,
+        'text-left': message.to_id === loggedInUserId,
+        'text-right': message.to_id !== loggedInUserId,
+        'mr-auto': message.to_id === loggedInUserId,
+        'ml-auto': message.to_id !== loggedInUserId,
+        'bg-purple-matcha': message.to_id === loggedInUserId,
+        'bg-green-500': message.to_id !== loggedInUserId,
+        'text-white-matcha': true}"
+      >{{message.content}}</h1>
     </div>
     <div class="send w-full flex items-stretch">
       <div class="w-10/12 h-full">
@@ -47,7 +53,7 @@ export default {
     ChatUser,
   },
   data: () => ({
-    messages: [],
+    messages: null,
     user: null,
     message: '',
     loggedInUserId: null,

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

@@ -71,7 +71,6 @@ export default {
   },
   beforeMount() {
     this.match = this.message.with_user;
-    console.log(this.message);
   },
 };
 </script>