fix: reduce markdown heading sizes in chat bubble (#365)

[SyncWithRaj]

Fixes #365

The default Tailwind prose classes were rendering Markdown typography (headings, lists, blockquotes) too large for the compact chat bubble UI.

This PR adds a comprehensive CSS override scoped to .chatbot-host-bubble.prose.

• Uses relative em units so typography scales proportionally with the widget's base font size.

• Adjusts margins and line heights for h1-h6, p, ul, ol, and blockquote to fit a conversational UI.

• Removes top/bottom margins on :first-child and :last-child to prevent awkward padding inside the bubble.

cc @chloebyun-wd ready for review! 🚀

[gemini-code-assist]

Code Review

This pull request introduces comprehensive typography overrides for chatbot host bubbles in src/assets/index.css, defining styles for headings, paragraphs, lists, and other markdown elements. The review feedback identifies a potential inconsistency where a required class is missing from the component logic, suggests using the :is() pseudo-class to reduce CSS repetition, and recommends using direct child selectors for margin resets to avoid layout issues in nested structures.

[gemini-code-assist]

The typography overrides defined here rely on the .chatbot-host-bubble class. However, this class is missing from the artifact rendering in BotBubble.tsx (line 348), which only uses the .prose class. This results in inconsistent heading sizes between the main chat message and markdown artifacts. Consider adding the .chatbot-host-bubble class to the artifact container in the component logic to ensure these styles apply globally to all host-generated content.

[gemini-code-assist]

The CSS selectors are highly repetitive. Using the :is() pseudo-class can significantly improve maintainability and reduce the size of the stylesheet by grouping the host bubble variations.

:is(.chatbot-host-bubble.prose, .chatbot-host-bubble .prose) :is(h4, h5, h6) {
  font-size: 0.95em;
  font-weight: 600;
  margin-top: 0.3em;
  margin-bottom: 0.15em;
  line-height: 1.4;
}

[gemini-code-assist]

Using the universal selector with :first-child and :last-child (e.g., .prose :first-child) will remove margins from every matching element at any nesting depth. This can cause layout issues within nested structures like lists or blockquotes. It is safer to use the direct child selector (>) to only target the top-level elements within the prose container.

.chatbot-host-bubble.prose > :first-child,
.chatbot-host-bubble .prose > :first-child {
  margin-top: 0;
}

.chatbot-host-bubble.prose > :last-child,
.chatbot-host-bubble .prose > :last-child {
  margin-bottom: 0;
}

[chloebyun-wd]

@SyncWithRaj loks good, and ive tested locally as well and the titles look more manageable in chat.
We also need to build the dist files in this repo so can you also commit those changed files as well? (ie. yarn build for these chanages)

Before	After

|

@henry-heng-wd for visibility

[SyncWithRaj]

Hi @chloebyun-wd , thank you so much for the review and for testing it out! The before/after comparison looks great. I just ran yarn build and pushed the updated dist files to this branch. Let me know if there's anything else needed to get this across the finish line!

[HenryHengZJ]

@chloebyun-wd are we much closer to ChatGPT, Gemini, Claude chat experience now with this changes?

I know previously it was way too big

[chloebyun-wd]

@HenryHengZJ yep its now closer to ChatGPT, Gemini, Claude experiences, with the exception of emoji usage (especially from chatgpt)