fix: enable word-break for long unbroken strings

[Anil567849]

Summary

Fixes text wrapping issue in Copilot Chat field where long unbroken strings is not breaking to next line correctly.
Now long words wrap correctly, improving readability and layout stability.

Fixes #1210

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

• Typed long unbroken text (e.g., anilanilanilanil...) → wrapped correctly
• Normal sentences with spaces remain unaffected
• Verified on Chrome, Firefox, and Safari

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

Before:

After:

[vercel]

@Anil567849 is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR fixes a text wrapping issue in the Copilot Chat input field by adding the break-all CSS class to the highlight overlay's pre element. The change specifically targets long unbroken strings that would previously cause horizontal overflow.

The modification is made to the user input component at apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx. The component uses a sophisticated dual-layer approach where an invisible textarea is overlaid by a visible pre element that provides syntax highlighting for @mentions and other features. The pre element's className is updated from whitespace-pre-wrap font-sans text-foreground text-sm leading-[1.25rem] to include break-all, resulting in: whitespace-pre-wrap break-all font-sans text-foreground text-sm leading-[1.25rem].

This fix ensures both layers maintain consistent text wrapping behavior. The break-all class forces word breaking at any character boundary, which is essential for handling edge cases with extremely long continuous strings without spaces (like "anilanilanilanil..."). The existing whitespace-pre-wrap behavior is preserved for normal text with spaces, so regular user input remains unaffected while problematic long strings now wrap properly.

The change integrates well with the existing codebase architecture. Looking at similar word-wrapping implementations in other parts of the codebase (like the WordWrap components in console and chat message areas), this approach of using CSS classes for text breaking is consistent with the project's patterns. The fix is minimal and targeted, affecting only the specific problematic area without disrupting the complex syntax highlighting functionality.

Confidence score: 5/5

• This PR is safe to merge with minimal risk as it's a targeted CSS fix for a specific layout issue
• Score reflects the simplicity of the change (single CSS class addition) and thorough testing across multiple browsers
• No files require special attention as this is a straightforward styling fix

_{1 file reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}