From 3bf59a4d450fdd80ab2879a6a8d949ae09245030 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 1 May 2026 21:02:09 -0700 Subject: [PATCH] fix(chat): tighten assistant message typography (0.0.7) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two small visual refinements to the assistant message body, found during a careful visual comparison against established chat UI conventions: 1. Add `padding: 0 12px 0 4px` to .chat-message__assistant-body — the previous zero horizontal padding let text touch container edges (especially noticeable in narrow containers like popup + sidebar). 12px right gives breathing room before the right edge; 4px left keeps a slight inset so the text doesn't crash into any left-side adornment. 2. Tighten the assistant body line-height from 1.6 to 1.55. The 1.6 felt slightly airy; 1.55 reads more compactly while still well above WCAG minimum. Markdown paragraphs keep their own line-height (1.75) per chat-markdown.styles, so this only affects plain assistant text. Pure CSS, no API change. Bumps @ngaf/chat to 0.0.7. Co-Authored-By: Claude Opus 4.7 (1M context) --- libs/chat/package.json | 2 +- libs/chat/src/lib/styles/chat-message.styles.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/libs/chat/package.json b/libs/chat/package.json index 4f6b98399..e50723eb8 100644 --- a/libs/chat/package.json +++ b/libs/chat/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/chat", - "version": "0.0.6", + "version": "0.0.7", "exports": { ".": { "types": "./index.d.ts", diff --git a/libs/chat/src/lib/styles/chat-message.styles.ts b/libs/chat/src/lib/styles/chat-message.styles.ts index c82a0bc45..f2a5d3535 100644 --- a/libs/chat/src/lib/styles/chat-message.styles.ts +++ b/libs/chat/src/lib/styles/chat-message.styles.ts @@ -13,7 +13,7 @@ export const CHAT_MESSAGE_STYLES = ` position: relative; margin-top: 1.5rem; color: var(--ngaf-chat-text); - line-height: var(--ngaf-chat-line-height); + line-height: 1.55; font-size: var(--ngaf-chat-font-size); max-width: 100%; } @@ -32,6 +32,7 @@ export const CHAT_MESSAGE_STYLES = ` } .chat-message__assistant-body { + padding: 0 12px 0 4px; overflow-wrap: break-word; }