fix(stream-bubble): shrink bubble to text width and equalise bubble-to-bubble gap at ~14px regardless of same-sender grouping

src/app/components/message/layout/Stream.tsx

@@ -6,8 +6,11 @@ import { useStreamLayoutDebug } from './streamDebug';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { Time } from '../Time';
 
-// Stream rows use a fixed `S400` gap so the rail-bridge offsets in
-// layout.css.ts (StreamRailBridgeY = S400) match the gap between rows.
+// Day-divider rows fall back to this `S400` MessageBase spacing variant
+// (see RoomTimeline.renderDayDivider). Message rows force collapse=true
+// in Message.tsx so their marginTop drops to 0 — the rail-bridge offsets
+// still resolve against `StreamRailBridgeY = S400` and the small overlap
+// over the tighter gap stays hidden by the dot halo.
 export const STREAM_MESSAGE_SPACING = '400' as const;
 
 // Sample timestamp used by the day-divider's invisible track-1 placeholder.
@@ -159,10 +162,7 @@ export const StreamLayout = as<'div', StreamLayoutProps>(
             )}
             ref={railRef}
           />
-          <span
-            className={classNames(css.StreamDotHalo, css.StreamHeaderDotHalo)}
-            ref={dotRef}
-          >
+          <span className={classNames(css.StreamDotHalo, css.StreamHeaderDotHalo)} ref={dotRef}>
             <span
               className={css.StreamDotFill}
               style={{ backgroundColor: dotColor, opacity: dotOpacity }}

src/app/components/message/layout/layout.css.ts

@@ -209,8 +209,13 @@ export const StreamRoot = recipe({
     columnGap: StreamRowGapVar,
     paddingLeft: StreamRowPadVar,
     alignItems: 'flex-start',
-    paddingTop: config.space.S100,
-    paddingBottom: config.space.S100,
+    // Vertical padding tuned to ~3px (down from S100/4px) so the
+    // bubble-to-bubble gap reads tighter. Per-row contribution to the
+    // gap drops from 8px to 7px on each side — combined with
+    // MessageBase's S100 top/bot the total bubble↔bubble gap is
+    // 4 + 3 + 0 (collapsed marginTop) + 3 + 4 = 14px ≈ S400/1.14.
+    paddingTop: toRem(3),
+    paddingBottom: toRem(3),
     paddingRight: config.space.S400,
   },
   variants: {
@@ -435,13 +440,16 @@ export const StreamBubble = recipe({
         borderRadius: `${toRem(4)} ${toRem(16)} ${toRem(16)} ${toRem(16)}`,
       },
     },
-    // Mobile fills the message column (block 100%); desktop fits content
-    // (inline-block fit-content). Branched via useScreenSizeContext, not
-    // CSS media queries — see docs/plans/dm_1x1_redesign.md §5.5.
+    // Both breakpoints fit content (inline-block + fit-content + max-width
+    // 100% of the message column). Per user feedback бабл должен быть «по
+    // размеру текстового сообщения», not stretched to the column's right
+    // edge on mobile. Padding still tightens on mobile (S300 vs 15px) to
+    // keep the bubble visually compact on narrow viewports.
     compact: {
       true: {
-        display: 'block',
-        width: '100%',
+        display: 'inline-block',
+        width: 'fit-content',
+        maxWidth: '100%',
         paddingLeft: config.space.S300,
         paddingRight: config.space.S300,
       },

src/app/features/room/message/Message.tsx

@@ -896,7 +896,15 @@ export const Message = as<'div', MessageProps>(
         className={classNames(css.MessageBase, className)}
         tabIndex={0}
         space={layout === 'channel' ? CHANNEL_MESSAGE_SPACING : STREAM_MESSAGE_SPACING}
-        collapse={collapse}
+        // Stream rows always render with collapsed marginTop (=0) so the
+        // bubble-to-bubble gap is uniform regardless of same-sender grouping.
+        // Total gap = 4×S100 (StreamRoot + MessageBase vertical padding on
+        // both sides) = 16px. The rail-bridge in layout.css.ts is still S400
+        // each side — it overshoots slightly across the smaller gap, but the
+        // overlap lands inside DotColumn behind the dot halo and stays
+        // invisible. `collapse` still drives avatar/header visibility inside
+        // ChannelLayout — channel mode keeps the original behaviour.
+        collapse={layout === 'channel' ? collapse : true}
         highlight={highlight}
         selected={!!menuAnchor || !!emojiBoardAnchor}
         {...props}