mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-08 03:00:28 -04:00
fix(frontend/copilot): constrain markdown heading sizes in user chat messages (#12463)
### Before <img width="600" height="489" alt="Screenshot 2026-03-18 at 19 24 41" src="https://github.com/user-attachments/assets/bb8dc0fa-04cd-4f32-8125-2d7930b4acde" /> Formatted headings in user messages would look massive ### After <img width="600" height="549" alt="Screenshot 2026-03-18 at 19 24 33" src="https://github.com/user-attachments/assets/51230232-c914-42dd-821f-3b067b80bab4" /> Markdown headings (`# H1` through `###### H6`) and setext-style headings (`====`) in user chat messages rendered at their full HTML heading size, which looked disproportionately large in the chat bubble context. ### Changes 🏗️ - Added Tailwind CSS overrides on the user message `MessageContent` wrapper to cap all heading elements (h1-h6) at `text-lg font-semibold` - Only affects user messages in copilot chat (via `group-[.is-user]` selector); assistant messages are unchanged ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [ ] Send a user message containing `# Heading 1` through `###### Heading 6` and verify they all render at constrained size - [ ] Send a message with `====` separator pattern and verify it doesn't render as a mega H1 - [ ] Verify assistant messages with headings still render normally Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -207,6 +207,7 @@ export function ChatMessagesContainer({
|
||||
className={
|
||||
"text-[1rem] leading-relaxed " +
|
||||
"group-[.is-user]:rounded-xl group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 group-[.is-user]:[border-bottom-right-radius:0] " +
|
||||
"group-[.is-user]:[&_h1]:text-lg group-[.is-user]:[&_h1]:font-semibold group-[.is-user]:[&_h2]:text-lg group-[.is-user]:[&_h2]:font-semibold group-[.is-user]:[&_h3]:text-lg group-[.is-user]:[&_h3]:font-semibold group-[.is-user]:[&_h4]:text-lg group-[.is-user]:[&_h4]:font-semibold group-[.is-user]:[&_h5]:text-lg group-[.is-user]:[&_h5]:font-semibold group-[.is-user]:[&_h6]:text-lg group-[.is-user]:[&_h6]:font-semibold " +
|
||||
"group-[.is-assistant]:bg-transparent group-[.is-assistant]:text-slate-900"
|
||||
}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user