fix: wrap reaction list items in small widths

MartinCupela · MartinCupela · commit 391622b66fa2 · 2026-04-24T15:31:11.000+02:00
diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss
@@ -197,7 +197,6 @@ $message-bubble-padding: var(--str-chat__spacing-xs);
         .str-chat__message-reactions-host {
           justify-self: flex-start;
           justify-content: flex-start;
-          width: 0;
           min-width: 0;
           overflow: visible;
           margin-inline: 0;
@@ -218,7 +217,7 @@ $message-bubble-padding: var(--str-chat__spacing-xs);
       }
 
       .str-chat__message-bubble {
-        justify-self: flex-start;
+        justify-self: flex-end;
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -197,7 +197,6 @@ $message-bubble-padding: var(--str-chat__spacing-xs);`
`197`	`197`	`.str-chat__message-reactions-host {`
`198`	`198`	`justify-self: flex-start;`
`199`	`199`	`justify-content: flex-start;`
`200`		`- width: 0;`
`201`	`200`	`min-width: 0;`
`202`	`201`	`overflow: visible;`
`203`	`202`	`margin-inline: 0;`
`@@ -218,7 +217,7 @@ $message-bubble-padding: var(--str-chat__spacing-xs);`
`218`	`217`	`}`
`219`	`218`
`220`	`219`	`.str-chat__message-bubble {`
`221`		`- justify-self: flex-start;`
	`220`	`+ justify-self: flex-end;`
`222`	`221`	`}`
`223`	`222`	`}`
`224`	`223`	`}`