fixed #69

src/components/MatchChatHistory.vue

@@ -7,7 +7,7 @@
         @translated="handleTranslatedText"
     />
     <div v-if="data.chat.length > 0" class="chat-history mt-2">
-      <table class="table table-borderless">
+      <table id="chat" :style="`max-width: ${data.clientWidth}px; width: ${data.clientWidth}px`" class="table table-borderless">
         <tbody>
         <tr v-for="(m, id) in data.chat" :key="id">
           <td class="td-time">
@@ -79,23 +79,20 @@ export default {
     const data = reactive({
       chat: [],
       translatedText: [],
-      originalChat: []
+      originalChat: [],
+      clientWidth: 0
     })
 
     const handleTranslatedText = async (e) => {
-      const res = await e
+      const [res, toggle] = await e
 
-      if (res === 'original' && data.originalChat.length > 0) {
-        data.chat = data.originalChat
-        return
-      }
-      if (res === 'already translated' && data.translatedText.length > 0) {
-        data.chat = data.translatedText
-        return
-      }
       if (res !== null) {
-        data.translatedText = await setPlayer(sortChatHistory(res, true))
-        data.chat = data.translatedText
+        if (toggle === 'translated') {
+          data.translatedText = await setPlayer(sortChatHistory(res, true))
+          data.chat = data.translatedText
+        } else if (toggle === 'original') {
+          data.chat = data.originalChat
+        }
       }
     }
 
@@ -158,8 +155,21 @@ export default {
       return arr
     }
 
+    const sizeTable = () => {
+      if (document.documentElement.clientWidth <= 768) {
+        data.clientWidth = document.documentElement.clientWidth - 32
+      } else {
+        data.clientWidth = 700
+      }
+    }
+
+    window.onresize = () => {
+      sizeTable()
+    }
+
     onMounted(() => {
       getChatHistory()
+      sizeTable()
     })
 
     return {
@@ -188,69 +198,77 @@ export default {
   margin-top: .5rem;
 }
 
-table {
-  width: 700px;
-  max-width: 700px;
-  td {
-    padding: .5rem;
-  }
+td {
+  padding: .5rem;
+}
 
-  .td-time {
-    width: 80px;
-  }
+.td-time {
+  width: 80px;
+}
 
-  .td-avatar {
-    width: 30px;
-    .avatar {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-    }
-  }
+.td-avatar {
+  width: 30px;
 
-  .td-name {
-    width: 250px;
-    max-width: 250px;
-    cursor: pointer;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    .tracked {
-      font-size: .8rem;
-      margin-right: .2rem;
-    }
-
-    .ban-shadow {
-      color: red;
-      text-shadow: 0 0 1rem orangered;
-    }
-  }
-
-  .td-icon {
+  .avatar {
     width: 20px;
+    height: 20px;
+    border-radius: 50%;
+  }
+}
 
-    .fa-caret-right {
-      font-size: 1rem;
-    }
+.td-name {
+  width: 200px;
+  max-width: 200px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .tracked {
+    font-size: .8rem;
+    margin-right: .2rem;
   }
 
+  .ban-shadow {
+    color: red;
+    text-shadow: 0 0 1rem orangered;
+  }
+}
+
+.td-icon {
+  width: 20px;
+
+  .fa-caret-right {
+    font-size: 1rem;
+  }
+}
+
+.td-message {
+  width: 400px !important;
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-left: 1rem;
+  }
+  .td-name {
+    width: 120px !important;
+    max-width: 120px !important;
+  }
   .td-message {
-    width: 320px;
+    width: auto !important;
   }
 }
 
 @media screen and (max-width: 576px) {
+  .container {
+    margin-left: 0;
+  }
   .td-avatar {
     display: none;
   }
-  .td-name {
-    width: 120px;
-    max-width: 120px;
-  }
-  .td-message {
-    width: auto;
-  }
 }
 </style>

src/components/TranslateChatButton.vue

@@ -33,7 +33,7 @@ export default {
       required: true
     }
   },
-  setup(props) {
+  setup() {
     const store = useStore()
 
     const data = reactive({
@@ -67,18 +67,12 @@ export default {
 
       toggleShow()
 
-      if (!props.translated && toggle.value === 'translated') {
-        response = await GetChatHistoryTranslated(store, store.state.matchDetails.match_id)
-      }
-      if (props.translated && toggle.value === 'translated')
-        response = 'already translated'
-      if (toggle.value === 'original')
-        response = 'original'
+      response = await GetChatHistoryTranslated(store, store.state.matchDetails.match_id)
 
       if (refreshButton.classList.contains('show'))
         refreshButton.classList.remove('show')
 
-      return response
+      return [response, toggle.value]
     }
 
     const toggleShow = () => {
@@ -108,6 +102,7 @@ export default {
 .toggle-btn {
   margin: 0 auto;
   cursor: pointer;
+  width: 100%;
 
   .fa {
     display: none;