updated css

src/App.vue

@@ -54,7 +54,7 @@ export default {
 .bg-img {
   z-index: -1;
   position: fixed;
-  width: 100%;
+  width: 100vh;
   object-fit: cover;
   overflow: hidden;
 }

src/components/MatchChatHistory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-history mt-2 d-flex justify-content-center align-items-center">
+  <div class="chat-history mt-2">
     <table v-if="data.chat.length > 0" class="table table-borderless">
       <tbody>
       <tr v-for="(m, id) in data.chat" :key="id">
@@ -156,11 +156,19 @@ table td {
 }
 
 .message {
-  width: 40ch;
+  width: auto;
   max-width: 40ch;
 }
 
+@media screen and (max-width: 991px) {
+  .chat-history {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 @media screen and (max-width: 576px) {
+
   .td-avatar {
     display: none;
   }