stream-chat-react 14.0.0-beta.2 → 14.0.0-beta.4

package/dist/cjs/mp3-encoder.js

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const audioProcessing = require("../audioProcessing-BbOs2wMd.js");
+const audioProcessing = require("./audioProcessing.56e5db9d.js");
 const ENCODING_BIT_RATE = 128;
 const COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;
 const float32ArrayToInt16Array = (float32Arr) => {

package/dist/css/emoji-replacement.css

@@ -0,0 +1,34 @@
+/* png based woff for most browsers */
+@font-face {
+  font-family: ReplaceFlagEmojiPNG;
+  src: url("assets/NotoColorEmoji-flags.woff2") format("woff2");
+  /* using the unicode-range attribute to limit the reach of the Flag Emoji web font to only flags */
+  unicode-range: U+1F1E6-1F1FF;
+}
+/* svg based for firefox */
+@font-face {
+  font-family: ReplaceFlagEmojiSVG;
+  src: url("assets/EmojiOneColor.woff2") format("woff2");
+  unicode-range: U+1F1E6-1F1FF;
+}
+.str-chat--windows-flags .str-chat__textarea__textarea,
+.str-chat--windows-flags .str-chat__message-textarea,
+.str-chat--windows-flags .str-chat__message-text-inner *,
+.str-chat--windows-flags .str-chat__emoji-item--entity,
+.str-chat--windows-flags .emoji-mart-emoji-native * {
+  font-family: ReplaceFlagEmojiPNG, var(--str-chat__font-family), sans-serif;
+  font-display: swap;
+}
+
+@-moz-document url-prefix('') {
+  .str-chat--windows-flags .str-chat__textarea__textarea,
+  .str-chat--windows-flags .str-chat__message-textarea,
+  .str-chat--windows-flags .str-chat__message-text-inner *,
+  .str-chat--windows-flags .str-chat__emoji-item--entity,
+  .str-chat--windows-flags .emoji-mart-emoji-native * {
+    font-family: ReplaceFlagEmojiSVG, var(--str-chat__font-family), sans-serif;
+    font-display: swap;
+  }
+}
+
+/*# sourceMappingURL=emoji-replacement.css.map */

package/dist/css/emoji-replacement.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/styling/_emoji-replacement.scss"],"names":[],"mappings":"AAEA;AACA;EACE;EACA;AACA;EACA,eAPyB;;AAU3B;AACA;EACE;EACA;EACA,eAdyB;;AAmBzB;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAIJ;EAEI;AAAA;AAAA;AAAA;AAAA;IAKE;IACA","file":"emoji-replacement.css"}

package/dist/css/index.css

@@ -1097,22 +1097,6 @@
   -moz-appearance: textfield;
 }
 
-/* declare asset path, useful if you want to create your own style bundle */
-@font-face {
-  font-family: "stream-chat-icons";
-  src: url("../assets/icons/stream-chat-icons.eot");
-  src: url("../assets/icons/stream-chat-icons.eot#iefix") format("embedded-opentype"), url("../assets/icons/stream-chat-icons.woff") format("woff2"), url("../assets/icons/stream-chat-icons.woff") format("woff"), url("../assets/icons/stream-chat-icons.ttf") format("truetype"), url("../assets/icons/stream-chat-icons.svg#stream-chat-icons") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  @font-face {
-    font-family: "stream-chat-icons";
-    src: url("../assets/icons/stream-chat-icons.svg#stream-chat-icons") format("svg");
-  }
-}
 .str-chat__icon {
   flex-shrink: 0;
   width: 1em;
@@ -1120,7 +1104,7 @@
   fill: currentColor;
 }
 
-.str-chat__icon--exclamation-circle {
+.str-chat__icon--exclamation-mark {
   stroke: currentColor;
 }
 
@@ -1892,6 +1876,66 @@
   top: var(--spacing-xs);
 }
 
+@keyframes str-chat-context-menu-roll-in-from-left {
+  from {
+    opacity: 0.12;
+    transform: translateX(16px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+@keyframes str-chat-context-menu-roll-in-from-right {
+  from {
+    opacity: 0.12;
+    transform: translateX(-16px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+@keyframes str-chat-context-menu-roll-in-from-top {
+  from {
+    opacity: 0.12;
+    transform: translateY(14px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes str-chat-context-menu-roll-in-from-bottom {
+  from {
+    opacity: 0.12;
+    transform: translateY(-14px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes str-chat-context-menu-submenu-forward {
+  from {
+    opacity: 0.18;
+    transform: translateX(28px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes str-chat-context-menu-submenu-backward {
+  from {
+    opacity: 0.18;
+    transform: translateX(-32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 .str-chat {
   /*
    * Dialog theme variables (ported from @stream-chat-css v2 Dialog theme),
@@ -1929,6 +1973,12 @@
   --str-chat__dialog-menu-button-border-inline-start: none;
   --str-chat__dialog-menu-button-border-inline-end: none;
   --str-chat__dialog-menu-button-box-shadow: none;
+  --str-chat__menu-roll-duration: 170ms;
+  --str-chat__menu-roll-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --str-chat__menu-submenu-forward-duration: 280ms;
+  --str-chat__menu-submenu-backward-duration: 400ms;
+  --str-chat__menu-submenu-forward-ease: cubic-bezier(0.2, 0.95, 0.25, 1);
+  --str-chat__menu-submenu-backward-ease: cubic-bezier(0.16, 0.92, 0.2, 1);
 }
 .str-chat .str-chat__context-menu {
   background: var(--str-chat__dialog-menu-background-color);
@@ -1988,6 +2038,19 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxxs);
+  overflow-x: hidden;
+}
+.str-chat .str-chat__context-menu .str-chat__context-menu__body.str-chat__context-menu__body--submenu-forward {
+  animation-duration: var(--str-chat__menu-submenu-forward-duration, 220ms);
+  animation-name: var(--str-chat__context-menu-submenu-forward-animation, str-chat-context-menu-submenu-forward);
+  animation-timing-function: var(--str-chat__menu-submenu-forward-ease, cubic-bezier(0.25, 0.9, 0.35, 1));
+  transform-origin: var(--str-chat__context-menu-submenu-forward-transform-origin, left center);
+}
+.str-chat .str-chat__context-menu .str-chat__context-menu__body.str-chat__context-menu__body--submenu-backward {
+  animation-duration: var(--str-chat__menu-submenu-backward-duration, 320ms);
+  animation-name: var(--str-chat__context-menu-submenu-backward-animation, str-chat-context-menu-submenu-backward);
+  animation-timing-function: var(--str-chat__menu-submenu-backward-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
+  transform-origin: var(--str-chat__context-menu-submenu-backward-transform-origin, right center);
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__button {
   background: var(--str-chat__dialog-menu-button-background-color);
@@ -2053,6 +2116,72 @@
 .str-chat .str-chat__context-menu .str-chat__user-context-menu__button {
   font-weight: var(--typography-font-weight-regular, 400);
 }
+.str-chat [data-str-chat-placement^=right] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: left center;
+}
+.str-chat [data-str-chat-placement^=left] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-right var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: right center;
+}
+.str-chat [data-str-chat-placement^=bottom] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-bottom var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: center top;
+}
+.str-chat [data-str-chat-placement^=top] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-top var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: center bottom;
+}
+.str-chat [data-str-chat-dialog-state=closing][data-str-chat-placement^=right] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse forwards;
+  transform-origin: left center;
+}
+.str-chat [data-str-chat-dialog-state=closing][data-str-chat-placement^=left] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-right var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse forwards;
+  transform-origin: right center;
+}
+.str-chat [data-str-chat-dialog-state=closing][data-str-chat-placement^=bottom] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-bottom var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse forwards;
+  transform-origin: center top;
+}
+.str-chat [data-str-chat-dialog-state=closing][data-str-chat-placement^=top] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-top var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse forwards;
+  transform-origin: center bottom;
+}
+.str-chat .str-chat__context-menu__submenu-container:not([data-str-chat-roll-from])[data-str-chat-roll-axis=x][data-str-chat-placement^=left] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-right var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: right center;
+}
+.str-chat .str-chat__context-menu__submenu-container:not([data-str-chat-roll-from])[data-str-chat-roll-axis=x]:not([data-str-chat-placement^=left]) > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: left center;
+}
+.str-chat .str-chat__context-menu__submenu-container[data-str-chat-roll-from=left] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: left center;
+}
+.str-chat .str-chat__context-menu__submenu-container[data-str-chat-roll-from=right] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-right var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: right center;
+}
+.str-chat .str-chat__context-menu__submenu-container[data-str-chat-roll-from=top] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-top var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: center top;
+}
+.str-chat .str-chat__context-menu__submenu-container[data-str-chat-roll-from=bottom] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-bottom var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: center bottom;
+}
+.str-chat .str-chat__context-menu[data-str-chat-enable-animations=false],
+.str-chat .str-chat__context-menu[data-str-chat-enable-animations=false] .str-chat__context-menu__body {
+  animation: none !important;
+  transform: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .str-chat [data-str-chat-placement] > .str-chat__context-menu {
+    animation: none;
+  }
+}
 
 .str-chat__dialog-overlay {
   inset: 0;
@@ -2616,9 +2745,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-xs);
+  padding-block: var(--spacing-xs);
+  padding-inline-start: var(--spacing-xs);
+  padding-inline-end: var(--spacing-sm);
   min-height: 60px;
 }
+.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__play-button-container {
+  padding: var(--spacing-xxs);
+}
 .str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata {
   min-width: 180px;
   padding-inline: var(--spacing-xs);
@@ -2662,14 +2796,16 @@
 }
 
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-bubble {
-  padding: 0;
-  background-color: transparent;
   border: 1px solid var(--chat-border-incoming);
   box-shadow: var(--background-core-elevation-0);
 }
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment {
   background-color: var(--chat-bg-incoming);
 }
+.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment .str-chat__message-attachment__voice-recording-widget {
+  padding: unset;
+  padding-inline-end: var(--spacing-xxs);
+}
 
 .str-chat__message--me .str-chat__message-attachment {
   background-color: var(--chat-bg-attachment-outgoing);
@@ -3492,7 +3628,7 @@
   position: absolute;
   width: calc(100% + 4px);
   height: calc(100% + 4px);
-  border: 2px solid var(--border-core-inverted);
+  border: 2px solid var(--border-core-inverse);
   border-radius: inherit;
 }
 .str-chat__avatar .str-chat__avatar-status-badge {
@@ -5094,6 +5230,7 @@
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-playback,
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-preview {
   flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
@@ -5116,7 +5253,7 @@
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-playback--isPlaying .str-chat__recording-timer {
   color: var(--chat-waveform-bar-playing);
 }
-.str-chat__audio_recorder .str-chat__audio-recorder__recording-preview .str-chat__icon--microphone {
+.str-chat__audio_recorder .str-chat__audio-recorder__recording-preview .str-chat__icon--voice {
   height: var(--icon-size-sm);
   width: var(--icon-size-sm);
   color: var(--button-destructive-text);
@@ -5166,11 +5303,11 @@
 }
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track-container,
 .str-chat__audio_recorder .str-chat__waveform-box-container {
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
-  width: 100%;
+  width: auto;
   min-width: 0;
-  flex-shrink: 1;
 }
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track-container {
   max-width: 500px;
@@ -5181,7 +5318,7 @@
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track {
   display: flex;
   min-width: 0;
-  width: unset;
+  width: 100%;
   align-items: center;
   flex-wrap: nowrap;
   height: 2rem;
@@ -5196,7 +5333,7 @@
   padding-inline: var(--spacing-xs);
 }
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track-container .str-chat__wave-progress-bar__track {
-  flex: unset;
+  flex: 1 1 auto;
 }
 .str-chat__audio_recorder .str-chat__audio_recorder__recording-controls {
   display: flex;
@@ -5336,16 +5473,6 @@
   max-width: var(--str-chat__message-max-width);
 }
 
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-bubble {
-  padding: 0;
-}
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
-  padding: 0;
-}
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-text {
-  display: none;
-}
-
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
   padding: 0;
 }
@@ -5403,10 +5530,10 @@
   grid-template-columns: 1fr;
 }
 .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host {
-  justify-self: flex-start;
+  justify-self: flex-end;
 }
 .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--flipped-horizontally) {
-  justify-self: flex-end;
+  justify-self: flex-start;
 }
 .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top) {
   padding-inline-start: calc(var(--str-chat__message-reactions-host-offset-x) * -1);
@@ -5439,10 +5566,10 @@
   grid-template-columns: 1fr;
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host {
-  justify-self: flex-end;
+  justify-self: flex-start;
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--flipped-horizontally) {
-  justify-self: flex-start;
+  justify-self: flex-end;
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top) {
   padding-inline-end: calc(var(--str-chat__message-reactions-host-offset-x) * -1);
@@ -6129,7 +6256,7 @@
 .str-chat__message-bounce-alert {
   max-width: 300px;
 }
-.str-chat__message-bounce-alert .str-chat__alert-header svg.str-chat__icon--exclamation-circle {
+.str-chat__message-bounce-alert .str-chat__alert-header svg.str-chat__icon--exclamation-mark {
   color: var(--text-tertiary);
 }
 
@@ -6352,7 +6479,7 @@
   background-color: var(--str-chat__attachment-preview-media-overlay-pressed-background-color);
 }
 .str-chat .str-chat__attachment-preview-media__overlay .str-chat__loading-indicator,
-.str-chat .str-chat__attachment-preview-media__overlay .str-chat__icon--exclamation-circle {
+.str-chat .str-chat__attachment-preview-media__overlay .str-chat__icon--exclamation-mark {
   width: 14px;
   height: 14px;
   position: absolute;
@@ -6713,7 +6840,7 @@
   --str-chat__cooldown-border-inline-start: 0;
   --str-chat__cooldown-border-inline-end: 0;
   --str-chat__cooldown-box-shadow: none;
-  --str-chat__message-composer-max-width: 768px;
+  --str-chat__message-composer-max-width: 1120px;
   --str-chat__message-composer-padding: var(--spacing-md);
   --str-chat__message-composer-command-transition-duration: 280ms;
   --str-chat__message-composer-command-ease: cubic-bezier(0.22, 1, 0.32, 1);
@@ -6894,11 +7021,11 @@
   height: var(--icon-size-md);
   width: var(--icon-size-md);
 }
-.str-chat .str-chat__message-composer-controls .str-chat__start-recording-audio-button .str-chat__icon--microphone {
+.str-chat .str-chat__message-composer-controls .str-chat__start-recording-audio-button .str-chat__icon--voice {
   height: var(--icon-size-md);
   width: var(--icon-size-md);
 }
-.str-chat .str-chat__message-composer-controls .str-chat__send-button .str-chat__icon--paper-plane {
+.str-chat .str-chat__message-composer-controls .str-chat__send-button .str-chat__icon--send {
   height: var(--icon-size-md);
   width: var(--icon-size-md);
 }
@@ -7015,7 +7142,7 @@
   height: var(--typography-font-size-xs);
   width: var(--typography-font-size-xs);
 }
-.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__message .str-chat__icon--microphone path {
+.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__message .str-chat__icon--voice path {
   stroke-width: 2;
 }
 .str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__message .str-chat__quoted-message-preview__message-text {
@@ -7052,11 +7179,11 @@
   border-radius: var(--radius-max);
   background-color: var(--control-play-control-bg);
 }
-.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator .str-chat__icon--play-solid {
+.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator .str-chat__icon--play-fill {
   height: 12px;
   width: 12px;
 }
-.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator .str-chat__icon--play-solid path {
+.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator .str-chat__icon--play-fill path {
   fill: var(--control-play-control-icon);
 }
 .str-chat .str-chat__quoted-message-preview--own {
@@ -7154,7 +7281,7 @@
 .str-chat__message-list-main-panel {
   --str-chat__message-list-scroll-max-width: calc(
     var(--str-chat__message-composer-max-width) +
-      var(--str-chat__message-composer-padding)
+      (2 * var(--str-chat__message-composer-padding))
   );
 }
 
@@ -7185,7 +7312,6 @@
   max-width: 100%;
 }
 .str-chat__message-list .str-chat__message-list-scroll {
-  /* Max container 800px, 16px padding → 768px readable content; matches composer width + padding */
   max-width: var(--str-chat__message-list-scroll-max-width);
 }
 .str-chat__message-list .str-chat__message-list-scroll .str-chat__ul {
@@ -7971,7 +8097,9 @@
   border-top: 1px solid var(--border-core-default);
 }
 .str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option--has-more-votes,
-.str-chat__modal__poll-results .str-chat__modal__poll-results__option-list .str-chat__poll-option--has-more-votes {
+.str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option--has-votes,
+.str-chat__modal__poll-results .str-chat__modal__poll-results__option-list .str-chat__poll-option--has-more-votes,
+.str-chat__modal__poll-results .str-chat__modal__poll-results__option-list .str-chat__poll-option--has-votes {
   padding-bottom: 0;
 }
 .str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option {
@@ -8378,10 +8506,20 @@
   gap: var(--spacing-xs);
   padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs));
 }
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-icon {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: system-ui;
+  font-style: normal;
+  letter-spacing: 0;
+  display: flex;
+}
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-info {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxxs);
+  flex-grow: 1;
+  min-width: 0;
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-info .str-chat__message-reactions-detail__user-list-item-username {
   color: var(--text-primary);
@@ -8397,6 +8535,7 @@
   color: var(--text-tertiary);
   font: var(--str-chat__metadata-default-text);
   cursor: pointer;
+  align-self: flex-start;
 }
 
 .str-chat__search {