From 40114b8eea73fb8c0b6daebf8174875795bbe3c5 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@coder.com>
Date: Wed, 11 Mar 2026 07:53:26 -0700
Subject: [PATCH] fix(site): remove custom li override to fix loose list
 paragraph nesting (#22951)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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.
---
 site/src/components/ai-elements/response.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/site/src/components/ai-elements/response.tsx b/site/src/components/ai-elements/response.tsx
index 942991b565..5487ca008b 100644
--- a/site/src/components/ai-elements/response.tsx
+++ b/site/src/components/ai-elements/response.tsx
@@ -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: () => (