Skip to content

Ensure text wrapping for long sentences across UI components #473

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ngoiyaeric merged 1 commit into from
Feb 1, 2026
Merged

Ensure text wrapping for long sentences across UI components #473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions components/chat-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,11 +292,11 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
</form>
{selectedFile && (
<div className="w-full px-4 pb-2 mb-2">
<div className="flex items-center justify-between p-2 bg-muted rounded-lg">
<span className="text-sm text-muted-foreground truncate max-w-xs">
<div className="flex items-start justify-between p-2 bg-muted rounded-lg">
<span className="text-sm text-muted-foreground break-all mr-2">
{selectedFile.name}
</span>
<Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button">
<Button variant="ghost" size="icon" className="shrink-0" onClick={clearAttachment} data-testid="clear-attachment-button">
<X size={16} />
Comment on lines +295 to 300
Copy link
Copy Markdown

@charliecreates charliecreates Bot Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

break-all will split filenames at arbitrary characters, which can noticeably hurt readability (e.g., splitting extensions or UUIDs mid-token). For filenames, break-words (or overflow-wrap:anywhere via Tailwind break-words) is usually the better default, optionally combined with min-w-0 on the text container to allow flex shrinking.

Given the intent is to avoid horizontal overflow, consider switching to break-words (or break-all only when needed, e.g., for extremely long unbroken strings).

Suggestion

Consider swapping break-all for break-words and ensuring the flex child can shrink:

<div className="flex items-start justify-between p-2 bg-muted rounded-lg">
  <span className="min-w-0 mr-2 text-sm text-muted-foreground break-words">
    {selectedFile.name}
  </span>
  <Button
    variant="ghost"
    size="icon"
    className="shrink-0"
    onClick={clearAttachment}
    data-testid="clear-attachment-button"
  >
    <X size={16} />
  </Button>
</div>

Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.

</Button>
</div>
Comment on lines +295 to 302
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider break-words instead of break-all for filenames.

The break-all class breaks text at any character boundary, which can split words mid-character (e.g., document → docu-ment). For filenames, break-words (used in message.tsx) might provide more readable breaks by preferring natural break points while still handling long continuous strings.

That said, since filenames often lack natural word boundaries (e.g., very_long_filename_with_underscores.pdf), break-all may be intentional here. If you've tested and prefer the current behavior, this is fine to keep.

💡 Alternative using break-words 
-            <span className="text-sm text-muted-foreground break-all mr-2">
+            <span className="text-sm text-muted-foreground break-words mr-2">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="flex items-start justify-between p-2 bg-muted rounded-lg">
<span className="text-sm text-muted-foreground break-all mr-2">
{selectedFile.name}
</span>
<Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button">
<Button variant="ghost" size="icon" className="shrink-0" onClick={clearAttachment} data-testid="clear-attachment-button">
<X size={16} />
</Button>
</div>
<div className="flex items-start justify-between p-2 bg-muted rounded-lg">
<span className="text-sm text-muted-foreground break-words mr-2">
{selectedFile.name}
</span>
<Button variant="ghost" size="icon" className="shrink-0" onClick={clearAttachment} data-testid="clear-attachment-button">
<X size={16} />
</Button>
</div>
🤖 Prompt for AI Agents 
In `@components/chat-panel.tsx` around lines 295 - 302, Replace the span's CSS
utility that forces character-level breaks: in the JSX containing
selectedFile.name (the span adjacent to the clearAttachment Button in the chat
panel), change the className token "break-all" to "break-words" so filenames
prefer natural break points while still wrapping long strings; ensure the class
update is applied to the span rendering selectedFile.name and verify visual
behavior near the Button with data-testid "clear-attachment-button".

Expand Down
6 changes: 3 additions & 3 deletions components/empty-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ export function EmptyScreen({
<Button
key={item.message} // Use a unique property as the key.
variant="link"
className="h-auto p-0 text-base flex items-center"
className="h-auto p-0 text-base flex items-start whitespace-normal text-left"
name={item.message}
onClick={async () => {
submitMessage(item.message);
}}
>
<Icon size={16} className="mr-2 text-muted-foreground" />
{item.heading}
<Icon size={16} className="mr-2 mt-1 text-muted-foreground shrink-0" />
<span className="flex-1">{item.heading}</span>
</Button>
Comment on lines 41 to 52
Copy link
Copy Markdown

@charliecreates charliecreates Bot Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The key for these items is item.message. If two example entries ever share the same message, React will treat them as the same element and can produce subtle UI bugs (wrong item updating/being focused). Since this is a user-facing list, it’s worth ensuring the key is truly unique (e.g., a stable id field), especially now that layout is more complex.

This is not introduced by your wrapping changes, but it’s in the modified block and is easy to harden while here.

Suggestion

If exampleMessages can be extended, prefer a guaranteed-unique key (e.g., item.id) or combine multiple fields:

key={`${item.message}-${item.heading}`}

(Or add an id to the data model and use that.) Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.

);
})}
Expand Down
2 changes: 1 addition & 1 deletion components/message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function BotMessage({ content }: { content: StreamableValue<string> }) {
const processedData = preprocessLaTeX(data || '')

return (
<div className="overflow-x-auto">
<div className="overflow-x-auto break-words">
<MemoizedReactMarkdown
rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }], rehypeKatex]}
remarkPlugins={[remarkGfm, remarkMath]}
Expand Down
2 changes: 1 addition & 1 deletion components/search-related.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const SearchRelated: React.FC<SearchRelatedProps> = ({
<ArrowRight className="h-4 w-4 mr-2 mt-1 flex-shrink-0 text-accent-foreground/50" />
<Button
variant="link"
className="flex-1 justify-start px-0 py-1 h-fit font-semibold text-accent-foreground/50 whitespace-normal text-left"
className="flex-1 justify-start items-start px-0 py-1 h-auto font-semibold text-accent-foreground/50 whitespace-normal text-left"
type="submit"
name={'related_query'}
value={item?.query}
Expand Down
6 changes: 3 additions & 3 deletions components/suggestions-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,14 @@ export const SuggestionsDropdown: React.FC<SuggestionsDropdownProps> = ({
key={index}
variant="ghost"
className={cn(
'w-full justify-start px-2 py-1 h-fit font-normal text-accent-foreground whitespace-normal text-left',
'w-full justify-start items-start px-2 py-1 h-auto font-normal text-accent-foreground whitespace-normal text-left',
selectedIndex === index && 'bg-accent'
)}
onClick={() => onSelect(item.query!)}
onMouseEnter={() => setSelectedIndex(index)}
>
<ArrowRight className="h-4 w-4 mr-2 flex-shrink-0" />
{item.query}
<ArrowRight className="h-4 w-4 mr-2 mt-1 flex-shrink-0" />
<span className="flex-1">{item.query}</span>
</Button>
)
})}
Expand Down