fix: wrap long text in forward chat comment textarea #38134
Conversation
Fixes RocketChat#26723 Added style prop with wordBreak: 'break-word' and whiteSpace: 'pre-wrap' to the TextAreaInput component in ForwardChatModal to ensure long text without spaces wraps to multiple lines instead of overflowing horizontally.
Fixes RocketChat#26723 Added style prop with wordBreak and whiteSpace to TextAreaInput component to ensure long text wraps properly instead of overflowing.
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
|
WalkthroughThis PR applies a styling fix to the ForwardChatModal textarea component to enable proper text wrapping for long comments in omnichannel chat transfers. CSS properties are added to the textarea to prevent text from extending beyond visible boundaries and becoming truncated or hidden. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx:
- Around line 132-149: Remove the inline JSX comment and wire the label to the
textarea for accessibility: delete the JSX comment above TextAreaInput, add a
unique id (e.g. "forward-comment") to the TextAreaInput (the element created via
register('comment')) and set that id on FieldLabel via its htmlFor/for prop so
the label is associated with the input; also replace the inline style
wordBreak/whiteSpace with overflowWrap: 'break-word' (and keep pre-wrap behavior
via whiteSpace: 'pre-wrap' if needed) to prefer overflowWrap for long-word
breaking.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)
**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation
Files:
apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
| <Field marginBlock={15}> | ||
|
|
||
| <FieldLabel> | ||
| {t('Leave_a_comment')}{' '} | ||
| <Box is='span' color='annotation'> | ||
| ({t('Optional')}) | ||
| </Box> | ||
| </FieldLabel> | ||
| <FieldRow> | ||
| <TextAreaInput data-qa-id='ForwardChatModalTextAreaInputComment' {...register('comment')} rows={8} flexGrow={1} /> | ||
| {/* Fix for issue #26723 - wrap long text */} | ||
| <TextAreaInput | ||
| data-qa-id='ForwardChatModalTextAreaInputComment' | ||
| {...register('comment')} | ||
| rows={8} | ||
| flexGrow={1} | ||
| style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }} | ||
| /> | ||
| </FieldRow> |
There was a problem hiding this comment.
Remove the inline JSX comment and wire up the label to the textarea (a11y), plus prefer overflowWrap for long-word breaking.
The JSX comment conflicts with repo guidelines for TS/TSX/JS, and the label currently isn’t associated with the input.
Proposed patch
<Field marginBlock={15}>
<FieldLabel>
{t('Leave_a_comment')}{' '}
<Box is='span' color='annotation'>
({t('Optional')})
</Box>
</FieldLabel>
<FieldRow>
- {/* Fix for issue #26723 - wrap long text */}
- <TextAreaInput
- data-qa-id='ForwardChatModalTextAreaInputComment'
- {...register('comment')}
- rows={8}
- flexGrow={1}
- style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
- />
+ <TextAreaInput
+ id={`${departmentFieldId}__comment`}
+ data-qa-id='ForwardChatModalTextAreaInputComment'
+ {...register('comment')}
+ rows={8}
+ flexGrow={1}
+ style={{ overflowWrap: 'anywhere', wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
+ />
</FieldRow>
</Field>- <FieldLabel>
+ <FieldLabel htmlFor={`${departmentFieldId}__comment`}>🤖 Prompt for AI Agents
In @apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx around
lines 132 - 149, Remove the inline JSX comment and wire the label to the
textarea for accessibility: delete the JSX comment above TextAreaInput, add a
unique id (e.g. "forward-comment") to the TextAreaInput (the element created via
register('comment')) and set that id on FieldLabel via its htmlFor/for prop so
the label is associated with the input; also replace the inline style
wordBreak/whiteSpace with overflowWrap: 'break-word' (and keep pre-wrap behavior
via whiteSpace: 'pre-wrap' if needed) to prefer overflowWrap for long-word
breaking.
1 participant
Proposed changes
This PR fixes the text overflow issue in the Forward Chat modal's comment textarea. Previously, long text without spaces would overflow horizontally outside the textarea. Now it wraps properly to multiple lines.
Changes made:
styleprop withwordBreak: 'break-word'andwhiteSpace: 'pre-wrap'to the TextAreaInput component in ForwardChatModal.tsxIssue(s)
Fixes #26723
Steps to test or reproduce
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa)Expected behavior: Text wraps properly across multiple lines
Screen affected: Forward Chat Modal in Omnichannel
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.