extra changes

src/modules/chat/main.css

@@ -88,10 +88,19 @@ body {
 }
 
 .msg-container {
+  direction: ltr;
   position: static;
-  display: inline-block;
   width: 100%;
-  padding-top: 10px;
+  padding: 10px 0px 0px 0px;
+  display: grid;
+  grid-template: 1fr / 1fr;
+  align-self: center;
+  width: fit-content;
+}
+
+.msg-container > * {
+  grid-column: 1 / 1;
+  grid-row: 1 / 1;
 }
 
 .message-window {
@@ -129,40 +138,34 @@ body {
   text-align: left;
   max-width: 100%;
   height: auto;
-  min-width: 125px;
+  min-width: fit-content;
   hyphens: auto;
-  bottom: 0;
-  right: 0;
-  float: right;
+  /* bottom: 0; */
+  /* right: 0; */
+  /* float: right; */
   overflow-wrap: break-word;
-}
-
-.message {
   position: relative;
   border: 2px solid #ff80e1;
-  box-shadow: 0 2px 10px rgba(255, 128, 225, 0.5);
+  /* box-shadow: 0 2px 10px rgba(255, 128, 225, 0.5); */
   background: linear-gradient(45deg, rgb(15, 12, 41, 0.7), rgb(48, 43, 99, 0.7));
   /* background: linear-gradient(45deg, rgba(72, 0, 154, 0.7), rgba(138, 43, 226, 0.7)); */
-
   color: white;
   padding: 15px;
   border-radius: 20px;
+  margin-bottom: 10px;
 }
-/* 
-.message::after {
-} */
 
 .arrow {
   content: '';
   border: 2px solid #ff80e1;
   position: absolute;
   left: 50%;
-  top: 100%;
   transform: translateX(-50%) rotate(180deg);
   border-width: 10px;
   border-style: solid;
   border-color: transparent transparent rgb(255, 128, 225, 0.7) transparent;
   color: #ff80e1;
+  bottom: -10px;
 }
 
 .sender {

src/modules/chat/main.js

@@ -63,8 +63,8 @@ function streamText() {
   }
 }
 
-function displayTwitchMessage(logoUrl, username, messageObject) {
-  if (!messageObject) {
+function displayTwitchMessage(message) {
+  if (!message.filteredMessage) {
     return;
   }
 
@@ -88,7 +88,7 @@ function displayTwitchMessage(logoUrl, username, messageObject) {
   article.innerHTML = placeMessage;
   const msg = article.querySelector('.message');
 
-  msg.innerHTML = `<div class="sender">${username}</div>`; // \n${message}`;
+  msg.innerHTML = `<div class="sender">${message.username}</div>`; // \n${message}`;
 
   msg.style.fontSize = '12pt';
 
@@ -114,12 +114,12 @@ function displayTwitchMessage(logoUrl, username, messageObject) {
     });
   }
   // fullMessageLength = getFullMessageLength(messageObject);
-  messageStream = messageObject.filtered;
+  messageStream = message.filteredMessage;
   textStreamContainer = document.querySelector('.message');
   streamText();
 }
 
 // // Receive a message from the server
-socket.on('message', (logoUrl, username, message, messageDuration) => {
-  displayTwitchMessage(logoUrl, username, message);
+socket.on('message', message => {
+  displayTwitchMessage(message);
 });