Skip to content

[Bug] - List items in chatbot can become misaligned #835

Description

@bexter89

Description

PatternFly's ListItem component wraps children in an inline <span>. When react-markdown produces block-level content like <p> inside list items (which happens with "loose" markdown lists), the inline <span> element can't properly contain it, causing list markers to shift out of alignment. This is intermittent because it depends on whether the LLM response includes blank lines between list items.

our fix was adding this simple rule:

.ask-redhat-core .pf-chatbot__message-ordered-list li > span,
.ask-redhat-core .pf-chatbot__message-unordered-list li > span {
    display: block;
}

Steps to Reproduce

a bit difficult to reproduce, as it is dependent on the LLM and getting an answer that has list items.

Data/JSON Context (if applicable)

No response

Environment

@patternfly/chatbot": "^6.5.0"

Screenshots or Logs

image


Jira Issue: PF-4134

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Fields

No fields configured for Bug.

Projects

Status
Needs triage

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions