fix: decouple message bubble width from reaction list width

Author: MartinCupela

src/components/Message/styling/Message.scss

@@ -66,7 +66,7 @@ $message-bubble-padding: var(--str-chat__spacing-xs);
   }
 
   .str-chat__message-bubble {
-    width: min(100%, var(--str-chat__message-max-width));
+    width: fit-content(var(--str-chat__message-max-width));
     max-width: var(--str-chat__message-max-width);
     display: flex;
     flex-direction: column;
@@ -596,6 +596,56 @@ $message-bubble-padding: var(--str-chat__spacing-xs);
   margin-inline-start: var(--str-chat-message-options-size);
 }
 
+@media (max-width: 767px) {
+  .str-chat__message.str-chat__message--other .str-chat__message-inner,
+  .str-chat__message.str-chat__message--me .str-chat__message-inner {
+    margin-inline: 0;
+    width: fit-content;
+    max-width: min(100%, var(--str-chat__message-max-width));
+  }
+
+  .str-chat__message.str-chat__message--other .str-chat__message-inner {
+    grid-template-columns: auto var(--str-chat-message-options-size);
+  }
+
+  .str-chat__message.str-chat__message--me .str-chat__message-inner {
+    grid-template-columns: var(--str-chat-message-options-size) auto;
+  }
+
+  .str-chat__message.str-chat__message--other
+    .str-chat__message-inner
+    .str-chat__message-reactions-host {
+    justify-self: flex-start;
+    justify-content: flex-start;
+    width: 0;
+    min-width: 0;
+    overflow: visible;
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+
+  .str-chat__message.str-chat__message--me
+    .str-chat__message-inner
+    .str-chat__message-reactions-host {
+    justify-self: flex-start;
+    justify-content: flex-start;
+    width: 0;
+    min-width: 0;
+    overflow: visible;
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+
+  .str-chat__message .str-chat__message-bubble {
+    width: fit-content(var(--str-chat__message-max-width));
+    max-width: min(100%, var(--str-chat__message-max-width));
+  }
+
+  .str-chat__message.str-chat__message--me .str-chat__message-bubble {
+    justify-self: flex-start;
+  }
+}
+
 .str-chat__li--middle,
 .str-chat__li--top {
   .str-chat__message {