fix(ui): make annotation wrap

apps/design_system_gallery/lib/components/message/stream_message_annotation.dart

@@ -18,10 +18,18 @@ Widget buildStreamMessageAnnotationPlayground(BuildContext context) {
 
   final label = context.knobs.string(
     label: 'Label',
-    initialValue: 'Also sent in channel ·',
+    initialValue: 'Also sent in channel',
     description: 'The annotation label text.',
   );
 
+  final showSeparator = context.knobs.boolean(
+    label: 'Show Separator',
+    initialValue: true,
+    description:
+        'Whether to place a middle dot between the label and the trailing slot. '
+        'It is dropped automatically when the row wraps onto a second line.',
+  );
+
   final showLeading = context.knobs.boolean(
     label: 'Show Leading',
     initialValue: true,
@@ -112,6 +120,7 @@ Widget buildStreamMessageAnnotationPlayground(BuildContext context) {
               : null,
           leading: showLeading ? Icon(leadingIcon.resolve(icons)) : null,
           label: Text(label),
+          separator: showSeparator ? StreamMessageAnnotation.separator : null,
           trailing: showTrailing ? Text(trailingText) : null,
           style: StreamMessageAnnotationStyle(
             spacing: StreamMessageLayoutProperty.all(spacing),
@@ -202,7 +211,8 @@ class _AnnotationTypesSection extends StatelessWidget {
           subtitle: 'Bold label + regular-weight informational trailing timestamp.',
           child: StreamMessageAnnotation(
             leading: Icon(icons.bell),
-            label: const Text('Reminder set ·'),
+            label: const Text('Reminder set'),
+            separator: StreamMessageAnnotation.separator,
             trailing: const Text('In 2 hours'),
           ),
         ),
@@ -212,7 +222,8 @@ class _AnnotationTypesSection extends StatelessWidget {
           child: StreamMessageAnnotation(
             onTap: () {},
             leading: const Icon(Icons.translate),
-            label: const Text('Translated ·'),
+            label: const Text('Translated'),
+            separator: StreamMessageAnnotation.separator,
             trailing: const Text('Show original'),
             style: StreamMessageAnnotationStyle.from(
               trailingTextColor: colorScheme.textLink,
@@ -225,7 +236,8 @@ class _AnnotationTypesSection extends StatelessWidget {
           child: StreamMessageAnnotation(
             onTap: () {},
             leading: Icon(icons.arrowUp),
-            label: const Text('Also sent in channel ·'),
+            label: const Text('Also sent in channel'),
+            separator: StreamMessageAnnotation.separator,
             trailing: const Text('View'),
             style: StreamMessageAnnotationStyle.from(
               trailingTextColor: colorScheme.textLink,
@@ -238,7 +250,8 @@ class _AnnotationTypesSection extends StatelessWidget {
           child: StreamMessageAnnotation(
             onTap: () {},
             leading: Icon(icons.arrowUp),
-            label: const Text('Replied to a thread ·'),
+            label: const Text('Replied to a thread'),
+            separator: StreamMessageAnnotation.separator,
             trailing: const Text('View'),
             style: StreamMessageAnnotationStyle.from(
               trailingTextColor: colorScheme.textLink,
@@ -252,7 +265,8 @@ class _AnnotationTypesSection extends StatelessWidget {
               'own GestureDetector and leave onTap null.',
           child: StreamMessageAnnotation(
             leading: const Icon(Icons.translate),
-            label: const Text('Translated ·'),
+            label: const Text('Translated'),
+            separator: StreamMessageAnnotation.separator,
             trailing: GestureDetector(
               onTap: () {},
               behavior: HitTestBehavior.opaque,
@@ -326,7 +340,8 @@ class _PresentationExample extends StatelessWidget {
             StreamMessageAnnotation(
               onTap: () {},
               leading: Icon(icons.arrowUp),
-              label: const Text('Also sent in channel ·'),
+              label: const Text('Also sent in channel'),
+              separator: StreamMessageAnnotation.separator,
               trailing: const Text('View'),
               style: StreamMessageAnnotationStyle(
                 trailingTextColor: _linkColor(colorScheme.textLink),
@@ -458,7 +473,8 @@ class _RealWorldSection extends StatelessWidget {
             children: [
               StreamMessageAnnotation(
                 leading: Icon(icons.bell),
-                label: const Text('Reminder set ·'),
+                label: const Text('Reminder set'),
+                separator: StreamMessageAnnotation.separator,
                 trailing: const Text('In 30 minutes'),
               ),
               StreamMessageBubble(
@@ -476,7 +492,8 @@ class _RealWorldSection extends StatelessWidget {
               StreamMessageAnnotation(
                 onTap: () {},
                 leading: Icon(icons.arrowUp),
-                label: const Text('Also sent in channel ·'),
+                label: const Text('Also sent in channel'),
+                separator: StreamMessageAnnotation.separator,
                 trailing: const Text('View'),
                 style: StreamMessageAnnotationStyle.from(
                   trailingTextColor: colorScheme.textLink,

packages/stream_core_flutter/CHANGELOG.md

@@ -17,6 +17,11 @@
   `voiceOffFill`, and `xmarkSmall`.
 - Added a `fix_data.yaml`, so deprecated members can be migrated with
   `dart fix --apply`.
+- Added `StreamMessageAnnotation.separator`, a slot between `label` and `trailing` for a punctuation mark, along with a ready-made `StreamMessageAnnotation.separator` middle dot to pass to it. It defaults to null, so existing annotations are unaffected. It only renders alongside a `trailing`, is styled like the `label`, and is hidden from assistive technologies.
+
+### 🐞 Fixed
+
+- `StreamMessageAnnotation` no longer wraps its `label` mid-sentence when the row is too narrow, stranding the trailing action beside the label's last line. The trailing slot now moves below the label as a whole, and the separator — which separates nothing once the two are on different lines — is dropped. A label too wide even on its own still wraps across as many lines as it needs.
 
 ### 🔄 Changed