fix(site): remove custom li override to fix loose list paragraph nesting (#22951)

## Problem

When streaming completes in the agent chat, `<p>` elements inside list
items visually break out of the `<ul>`, rendering as `<ul> → <li>` then
`<p>` after `</ul>` instead of staying nested as `<ul> → <li> → <p>`.

## Root Cause

The `Response` component overrides streamdown's default `li` component
to handle GFM task-list items (suppressing bullets when a checkbox is
present). However, this override drops streamdown's built-in
`[&>p]:inline` CSS class from `MarkdownLi`.

When the final markdown from the LLM contains blank lines between list
items, `remark-parse` treats it as a **loose list** per the CommonMark
spec and wraps each item's content in `<p>` tags. Without
`[&>p]:inline`, those `<p>` tags render as block elements with default
margins, visually pushing content outside the list.

During streaming this is less noticeable because `remend` preprocesses
incomplete markdown and the list items tend to arrive without blank-line
separators (tight list → no `<p>` wrapping).

## Fix

Remove the custom `li` override entirely. Streamdown's built-in
`MarkdownLi` already handles both:
- Task-list bullet suppression
- Paragraph nesting via `[&>p]:inline`

The custom `input` override for styled checkboxes is unaffected since
it's a separate component.
This commit is contained in:
Kyle Carberry
2026-03-11 10:53:26 -04:00
committed by GitHub
parent 2f2ba0ef7e
commit 40114b8eea
+1 -6
View File
@@ -151,12 +151,7 @@ const createComponents = (
</span>
);
},
// Task-list items: remove the default bullet marker.
li: ({ className, children }: MarkdownComponentProps) => {
const isTask =
typeof className === "string" && className.includes("task-list-item");
return <li className={isTask ? "list-none" : undefined}>{children}</li>;
},
// Horizontal rule: reset browser default inset/ridge border
// (preflight is disabled) to a clean 1px solid line.
hr: () => (