fix(bubble): stop painting the sender tint and bubble padding around a designed mail

Author: ankursarv

src/components/ChatBubble.tsx

@@ -117,7 +117,13 @@ export interface ChatBubbleProps {
   onDownloadAttachment?: (attachment: Attachment, message: ChatMessage) => void;
   /** Controls shown at the bubble's outer edge on hover: menus, star, retry. */
   renderActions?: (message: ChatMessage) => ReactNode;
-  /** Anything below the body, inside the bubble: a reply box, an AI notice. */
+  /**
+   * Anything below the body, inside the bubble: a reply box, an AI notice.
+   *
+   * A bubble holding a designed mail carries no padding of its own — the
+   * document reaches the card's edge — so a footer that needs breathing room
+   * has to bring it. Style it against `.sec-bubble--doc` if it must differ.
+   */
   renderFooter?: (message: ChatMessage) => ReactNode;
   className?: string;
 }
@@ -174,10 +180,15 @@ export function ChatBubble({
   );
 
   const attachments = message.attachments ?? [];
+  // A designed mail is not a chat line, it is a finished document: it brings
+  // its own background, its own margins and often its own colour scheme. Tint
+  // and pad it like a bubble and the reader gets a card inside a card. So a
+  // framed body keeps the container and loses the costume.
+  const isDocument = shape.kind === 'rich';
   // A framed body needs a sized containing block, so its bubble takes the full
   // column. A short inline one hugs its text, which is what makes a two-word
   // reply look like a two-word reply.
-  const hug = shape.kind !== 'rich';
+  const hug = !isDocument;
 
   const rowClasses = ['sec-row', isMine ? 'sec-row--mine' : 'sec-row--theirs', className]
     .filter(Boolean)
@@ -187,6 +198,7 @@ export function ChatBubble({
     isMine ? 'sec-bubble--mine' : 'sec-bubble--theirs',
     compact ? '' : 'sec-bubble--tail',
     hug ? '' : 'sec-bubble--wide',
+    isDocument ? 'sec-bubble--doc' : '',
   ]
     .filter(Boolean)
     .join(' ');
@@ -244,7 +256,10 @@ export function ChatBubble({
           // The audit trail, in the DOM. "Why did part of my email disappear?"
           // is answerable with devtools instead of a rebuild.
           data-sec-applied={message.applied?.length ? message.applied.join(' ') : undefined}
-          style={!isMine && color ? { backgroundColor: color.bubble } : undefined}
+          // The sender tint is skipped for a document: it would sit behind the
+          // mail's own background, visible only as a coloured rim. The avatar
+          // and the sender name above the bubble carry that colour instead.
+          style={!isMine && color && !isDocument ? { backgroundColor: color.bubble } : undefined}
         >
           <MessageBody
             message={message}

src/styles/index.css

@@ -384,6 +384,60 @@
   width: 100%;
 }
 
+/*
+ * A framed body — a newsletter, an approval notice, any mail built as a page.
+ *
+ * It is rendered verbatim, which is the rule: designed mail is not reflowed.
+ * But verbatim means it arrives with its own background and its own margins,
+ * and a bubble that then tints and pads it produces a card inside a card. Two
+ * or three of those in a row from one sender is the "heavy formatting looks
+ * weird" report. So the bubble keeps only what a container owes the document:
+ * an edge, a radius, and the clipping that makes the radius mean something.
+ */
+.sec-bubble--doc {
+  padding: 0;
+  /* Beats the inline sender tint only because the tint is skipped for a
+     document in `ChatBubble`; this covers `--mine`, which is a class. */
+  background: var(--sec-surface);
+  box-shadow: none;
+  /* The document fills the card edge to edge, so the card has to clip it —
+     otherwise its corners square off over the border radius. */
+  overflow: hidden;
+}
+
+/* A document is its own surface, so the reader's own designed mail cannot
+   inherit the brand-filled bubble's ink or its chip treatment. */
+.sec-bubble--doc.sec-bubble--mine {
+  border-color: var(--sec-border);
+  color: var(--sec-bubble-theirs-ink);
+}
+
+.sec-bubble--doc.sec-bubble--mine .sec-chip {
+  border-color: var(--sec-border);
+  background: var(--sec-surface);
+  color: var(--sec-ink);
+}
+
+.sec-bubble--doc.sec-bubble--mine .sec-chip__clip,
+.sec-bubble--doc.sec-bubble--mine .sec-chip__size {
+  color: var(--sec-muted);
+  opacity: 1;
+}
+
+/* Padding came off the bubble, so the parts that are ours rather than the
+   sender's bring their own — and a rule to sit behind, so they read as the
+   frame around the document instead of part of it. */
+.sec-bubble--doc .sec-attachments {
+  margin-block-start: 0;
+  padding: var(--sec-pad);
+  border-block-start: 1px solid var(--sec-border);
+}
+
+.sec-bubble--doc .sec-note--images {
+  margin-block-end: 0;
+  border-radius: 0;
+}
+
 /* The squared corner points back at the avatar, and only on the FIRST bubble of
    a run — which is exactly where the avatar is. */
 .sec-bubble--tail.sec-bubble--theirs {

test/components/ChatBubble.test.tsx

@@ -152,6 +152,40 @@ describe('ChatBubble', () => {
     expect(rich.container.querySelector('.sec-bubble')?.className).toContain('sec-bubble--wide');
   });
 
+  // Regression: a designed mail is rendered verbatim, so it arrives with its
+  // own background. Paint the sender tint behind it and pad it like a chat
+  // line and the reader sees a card inside a card — which is what a heavy HTML
+  // mail looked like. The tint has to be dropped and `--doc` has to be on, or
+  // the stylesheet has nothing to hang the padding removal off.
+  it('drops the sender tint and the bubble padding for a designed mail', () => {
+    const { container } = render(
+      <ChatBubble
+        message={chatMessage({ body: '<table><tr><td>Approve</td></tr></table>' })}
+        color={COLOR}
+        labels={DEFAULT_LABELS}
+        {...FIXED}
+      />,
+    );
+    const bubble = container.querySelector('.sec-bubble') as HTMLElement;
+    expect(bubble.className).toContain('sec-bubble--doc');
+    expect(bubble.style.backgroundColor).toBe('');
+    // The identity colour is not lost, it moves to where it can be seen.
+    expect((container.querySelector('.sec-avatar') as HTMLElement).style.backgroundColor).toBe(
+      COLOR.avatar,
+    );
+  });
+
+  // Regression: `--doc` is the framed-body marker, so an inline reply must
+  // never carry it — a plain bubble with no padding collapses onto its text.
+  it('keeps the tinted, padded bubble for an inline reply', () => {
+    const { container } = render(
+      <ChatBubble message={chatMessage()} color={COLOR} labels={DEFAULT_LABELS} {...FIXED} />,
+    );
+    const bubble = container.querySelector('.sec-bubble') as HTMLElement;
+    expect(bubble.className).not.toContain('sec-bubble--doc');
+    expect(bubble.style.backgroundColor).toBe(COLOR.bubble);
+  });
+
   // Regression: end-to-end cover for the "screenful of blank under the last
   // line" bug. The bubble must render the SHAPE's html, not `message.body` —
   // wire it to the original and the trailing empty wrappers come back, and a