fixed typing indicator placement issues.

src/components/app/MessageLogs.vue

@@ -23,28 +23,7 @@
       :type="msg.type"
       :timeEdited="msg.timeEdited"
     />
-    <!-- <div class="typing-list">
-      <message-typing
-        class="message-container"
-        :username="user.username"
-        :uniqueID="user.uniqueID"
-        :avatar="user.avatar"
-        :channelID="'5865686142508030876'"
-      />
-      <message-typing
-        class="message-container"
-        :username="user.username"
-        :uniqueID="user.uniqueID"
-        :avatar="user.avatar"
-        :channelID="'5865686142508030876'"
-      />
-    </div>-->
-    <div class="typing-outer">
-      <typing-status
-        v-if="typingRecipients[selectedChannelID]"
-        :recipients="typingRecipients[selectedChannelID]"
-      />
-    </div>
+
     <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />
     <div
       class="load-more-button"
@@ -63,17 +42,14 @@ import Message from "../../components/app/MessageTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import uploadsQueue from "@/components/app/uploadsQueue.vue";
 import debounce from "lodash/debounce";
-import TypingStatus from "@/components/app/TypingStatus.vue";
 
 import windowProperties from "@/utils/windowProperties";
 
 export default {
-  props: ["typingRecipients"],
   components: {
     Message,
     Spinner,
-    uploadsQueue,
-    TypingStatus
+    uploadsQueue
   },
   data() {
     return {
@@ -347,13 +323,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.typing-outer {
-  display: flex;
-  flex: 1;
-  height: 20px;
-  margin-bottom: 5px;
-  margin-left: 10px;
-}
 .message-logs {
   overflow: auto;
   flex: 1;

src/components/app/MessagePanel.vue

@@ -9,7 +9,6 @@
       <spinner />
     </div>
     <message-logs
-      :typingRecipients="typingRecipients"
       v-else-if="selectedChannelID && selectedChannelMessages"
       :key="selectedChannelID"
     />
@@ -19,7 +18,12 @@
         class="message"
       >{{type === 0 ? 'Select a person to message!' : type === 1 ?'Select a server!' : "wot"}}</div>
     </div>
-
+    <div class="typing-outer">
+      <typing-status
+        v-if="typingRecipients[selectedChannelID]"
+        :recipients="typingRecipients[selectedChannelID]"
+      />
+    </div>
     <div class="chat-input-area" v-if="selectedChannelID">
       <div style="position: relative;">
         <transition name="show-up">
@@ -96,6 +100,7 @@ import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue"
 import MessageLogs from "@/components/app/MessageLogs.vue";
 import emojiParser from "@/utils/emojiParser.js";
 import windowProperties from "@/utils/windowProperties";
+import TypingStatus from "@/components/app/TypingStatus.vue";
 
 const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue");
 const EditPanel = () => import("@/components/app/EditPanel.vue");
@@ -108,7 +113,8 @@ export default {
     emojiPanel,
     heading,
     EditPanel,
-    MessageLogs
+    MessageLogs,
+    TypingStatus
   },
   data() {
     return {
@@ -641,6 +647,12 @@ export default {
     font-size: 50px;
   }
 }
+.typing-outer {
+  display: flex;
+  height: 20px;
+  margin-bottom: 5px;
+  margin-left: 10px;
+}
 
 .hidden {
   display: none;