Description
When ChatbotWelcomePrompt renders welcome/suggested prompt cards with long title or message values, the text overflows horizontally outside the card boundary instead of truncating.
This is especially visible when consumers pass user-generated content (e.g. saved prompts with long names and bodies) as prompts[].title and prompts[].message.
Steps to reproduce
- Render
ChatbotWelcomePrompt with a prompt like:
<ChatbotWelcomePrompt
title="Hello"
description="How can I help?"
prompts={[
{
title: 'aDSFGGEWRTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNM',
message: 'QEWRETRTDYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTY',
onClick: () => {},
},
]}
/>
- Observe the card title and body text extend past the card border.
Expected behavior
Actual behavior
Title and message render as unbroken single-line strings that overflow the card container.
Component / version
Suggested fix
Apply truncation styles in ChatbotWelcomePrompt (or underlying PF CardTitle / CardBody usage), e.g.:
Optionally expose props to control clamp line count.
Workaround
Consumers currently override via CSS targeting .pf-chatbot__prompt-suggestion .pf-v6-c-card__title and .pf-v6-c-card__body.
Jira Issue: PF-4645
Description
When
ChatbotWelcomePromptrenders welcome/suggested prompt cards with longtitleormessagevalues, the text overflows horizontally outside the card boundary instead of truncating.This is especially visible when consumers pass user-generated content (e.g. saved prompts with long names and bodies) as
prompts[].titleandprompts[].message.Steps to reproduce
ChatbotWelcomePromptwith a prompt like:Expected behavior
Prompt card title should truncate with ellipsis (single line).
Prompt card message/body should clamp to a reasonable number of lines (e.g. 2) with ellipsis.
Actual behavior
Title and message render as unbroken single-line strings that overflow the card container.
Component / version
Component:
ChatbotWelcomePrompt(pf-chatbot__prompt-suggestioncards)@patternfly/chatbotversion observed:6.9.0-prerelease.2Suggested fix
Apply truncation styles in
ChatbotWelcomePrompt(or underlying PFCardTitle/CardBodyusage), e.g.:CardTitle:overflow: hidden; text-overflow: ellipsis; white-space: nowrapCardBody: multi-line clamp (-webkit-line-clamp: 2) formessageOptionally expose props to control clamp line count.
Workaround
Consumers currently override via CSS targeting
.pf-chatbot__prompt-suggestion .pf-v6-c-card__titleand.pf-v6-c-card__body.Jira Issue: PF-4645