diff --git a/src/app/components/message/layout/Stream.tsx b/src/app/components/message/layout/Stream.tsx index 9a8ec183..910c14cc 100644 --- a/src/app/components/message/layout/Stream.tsx +++ b/src/app/components/message/layout/Stream.tsx @@ -225,7 +225,12 @@ export const StreamLayout = as<'div', StreamLayoutProps>(
{header && ( -
+
{header}
)} diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts index 34f5d719..50a1af20 100644 --- a/src/app/components/message/layout/layout.css.ts +++ b/src/app/components/message/layout/layout.css.ts @@ -191,6 +191,9 @@ const StreamSyslineDotSize = toRem(6); const StreamDayDotSize = toRem(12.1); const StreamRailLineWidth = '1px'; const StreamBubbleBorderWidth = '1px'; +// Minimal, all-corners rounding for the incoming bubble + the peer name chip +// (user request — like the VS Code reference, no sharp/notched corner). +const StreamBubbleRadius = toRem(6); const StreamTimeLineHeight = toRem(13); const StreamRailBridgeY = config.space.S400; @@ -199,7 +202,10 @@ const StreamRailBridgeY = config.space.S400; // larger than chat body (T400 = 15px). The dot + timestamp vertically centre // on this line, so its line-height drives the rail geometry below. const StreamNameFontSize = toRem(16); -const StreamNameLineHeight = toRem(20); +// Line-height (not font) drives the name-chip height: 26.4px (20 × 1.2 × 1.1) +// gives the peer name bubble more vertical breathing room around the 16px nick +// while the dot + timestamp follow automatically via StreamHeaderInnerCenterY. +const StreamNameLineHeight = toRem(26.4); // Vertical centre of the author-name line, measured from the row's // content-area top. The name is now the FIRST child of StreamColumn (track 3) @@ -444,13 +450,13 @@ export const StreamBubble = recipe({ // Incoming (peer) bubble — filled with the SAME surface as the composer // card (`color.Surface.Container`, see RoomView.css.ts) so the bubble and // the input form read as one material; it sits a step darker than the - // `SurfaceVariant.Container` page background. Top-left corner flat, other - // three rounded (user point 7). Own messages override to a no-chrome + // `SurfaceVariant.Container` page background. Minimal rounding on ALL four + // corners (no sharp/notched corner). Own messages override to a no-chrome // plain block below. backgroundColor: color.Surface.Container, color: color.SurfaceVariant.OnContainer, border: `${StreamBubbleBorderWidth} solid ${color.Surface.ContainerLine}`, - borderRadius: `${toRem(4)} ${toRem(16)} ${toRem(16)} ${toRem(16)}`, + borderRadius: StreamBubbleRadius, // Padding bumped ~1.1× (user request) so the bubble reads a touch larger // around the text: vertical 8→8.8px, horizontal 15→16.5px. paddingTop: toRem(8.8), @@ -571,6 +577,21 @@ globalStyle(`${StreamName} > *`, { minWidth: 0, }); +// Peer (incoming) author name rendered as a chip in the SAME surface as the +// message bubble (`color.Surface.Container`) — a mini incoming-bubble for the +// label, with the same minimal all-corners rounding (user request). Own names +// stay plain (own messages are plain text). Horizontal padding only — NO +// vertical padding, so the name's line box (and the dot/timestamp aligned to +// its centre) doesn't shift; the fill spans the line height. +export const StreamNamePeerBubble = style({ + backgroundColor: color.Surface.Container, + // Slightly larger rounding than the message bubble (user request) + wider + // horizontal padding to match the taller chip. + borderRadius: toRem(9), + paddingLeft: toRem(11), + paddingRight: toRem(11), +}); + // Message-row timestamp — grid item in track 1, content-sized. Pushed // down by the same Y as StreamHeaderDotHalo so timestamp / dot / Username // share one baseline.