message align left on oversize

src/components/icon.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="iconContainer" >
+  <button class="iconContainer" >
     <img class="icon" v-bind:src=ic alt="" />
-  </div>
+  </button>
 </template>
 
 <script>
@@ -22,6 +22,7 @@ name: "icon",
     box-shadow: 3px 3px 10px #111;
     cursor: pointer;
     user-select: none;
+    border: none;
   }
   .icon{
     position: absolute;

src/components/newMessage.vue

@@ -1,34 +1,46 @@
 <template>
   <div class="newMessageBanner">
-    <label for="newMessageInput"></label><textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="content" />
+    <label for="newMessageInput"></label>
-    <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
+    <textarea  id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="msg.content.text" />
+    <icon v-on:click="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
   </div>
 </template>
 
 <script>
 import icon from './icon.vue';
-import sendMessage from '../main.js';
+import main from '../main.js';
 
 export default {
   name: "newMessage",
   components: {
     icon
   },
-  props: {
-    content: String
-  },
   mounted() {
     ResizeListener(document.getElementById("newMessageInput"));
-    document.getElementById("sendMessageBtn").addEventListener("click", () => {
+    /*document.getElementById("sendMessageBtn").addEventListener("click", () => {
       if (document.getElementById("newMessageInput").value !== '') {
-        sendMessage.methods.callSendMessage(document.getElementById("newMessageInput").value)
+        main.methods.sendMessage(document.getElementById("newMessageInput").value)
         document.getElementById("newMessageInput").value = ''
         //sendMessage.methods.callSendMessage(this.data.message)
       }
-    })
+    })*/
   },
-  data: function () {
+  methods: {
-    return { message: this.content}
+    sendMessage(){
+      this.msg.time = Date.now()
+      main.methods.sendWebSocket(this.msg)
+    }
+  },
+  data(){
+    return {
+      msg: {
+        type: "message",
+        time: Date.now(),
+        content: {
+          text: ""
+        }
+      }
+    }
   }
 }
 

src/main.js

@@ -12,8 +12,18 @@ export default {
     sendMessage()
   },
   methods: {
-    callSendMessage(data) {
+    sendMessage(message){
-      sendMessage(data)
+      let msg = {
+        type: "message",
+        time: Date.now(),
+        content: {
+          message: message
+        }
+      }
+      socket.send(JSON.stringify(msg))
+    },
+    sendWebSocket(msg){
+      socket.send(JSON.stringify(msg))
     }
   }
 }