fix: decouple msg bubble width from reaction list width (#3142)

Author: MartinCupela

examples/vite/src/index.scss

@@ -24,7 +24,10 @@ body {
 #root {
   display: flex;
   flex-direction: column;
+  /* Fallback for browsers without dynamic viewport units */
   height: 100vh;
+  /* Match the visible viewport on mobile browser UI changes */
+  height: 100dvh;
   min-height: 0;
 }
 

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 {