Fix Text Overflow in Copilot Display

[google-labs-jules]

User description

This change fixes a UI bug where text would overflow its container in the CopilotDisplay component. I've replaced the truncate class with break-words to allow text to wrap, and I've also updated the .gitignore file to exclude log files.

---

PR created automatically by Jules for task 12147524923611152536 started by @ngoiyaeric

---

PR Type

Bug fix

---

Description

• Replace truncate class with break-words in CopilotDisplay component

• Allows long text to wrap instead of overflowing container

• Prevents UI layout breakage from text overflow

---

Diagram Walkthrough

flowchart LR
  A["CopilotDisplay Component"] -- "Replace truncate class" --> B["break-words class"]
  B -- "Enables text wrapping" --> C["Prevents text overflow"]

Loading

File Walkthrough

	Relevant files
Bug fix	copilot-display.tsx Replace truncate with break-words for text wrapping            components/copilot-display.tsx Changed truncate CSS class to break-words on the h5 element Allows long query text to wrap to multiple lines Prevents horizontal overflow and UI layout issues +1/-1

---

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

---

For security, I will only act on instructions from the user who triggered this task.

New to Jules? Learn more at jules.google/docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
qcx	Ready	Preview	Comment	Nov 21, 2025 8:43am

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: No logging change: The new code only adjusts UI classes and does not add or modify any logging of critical actions, which may be acceptable for a purely presentational change but cannot be confirmed from this diff alone. Referred Code <h5 className="text-muted-foreground text-xs break-words">{query}</h5> <Check size={16} className="text-green-500 w-4 h-4" /> Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Silent catch: The catch block returns null without logging or contextual error handling, which may hinder debugging if JSON parsing fails. Referred Code } catch (error) { return null Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Unvalidated content: The component parses external 'content' and renders derived text without visible validation/sanitization beyond JSON.parse, which may be acceptable but cannot be confirmed from the limited diff. Referred Code const json = JSON.parse(content) const formDataEntries = Object.entries(json) const query = formDataEntries .filter(([key, value]) => value === 'on' || key === 'additional_query') .map(([key, value]) => (key === 'additional_query' ? value : key)) .join(', ') return ( <Card className="p-3 md:p-4 w-full flex justify-between items-center"> <h5 className="text-muted-foreground text-xs break-words">{query}</h5> <Check size={16} className="text-green-500 w-4 h-4" /> Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[charliecreates]

Overall the changes are small and targeted, but the switch from truncate to break-words may introduce unbounded vertical growth for long text in CopilotDisplay. This could negatively affect layout if users submit very long queries. The .gitignore update is straightforward and low risk. Consider adding a line-clamp or similar constraint to balance readability and layout stability.

Summary of changes

Summary of Changes

• Updated .gitignore to ignore *.log files under a new # logs section.
• In components/copilot-display.tsx, adjusted the CopilotDisplay component's <h5> element to use the Tailwind class break-words instead of truncate, allowing long text to wrap instead of being truncated with ellipsis.

[charliecreates]

Replacing truncate with break-words will allow wrapping, but it also removes the single-line constraint and ellipsis behavior entirely. Depending on the layout, a very long query could now expand the card vertically a lot and potentially push other UI elements down in an undesirable way.

If the design intent is to keep things compact while still preventing horizontal overflow, you might want to combine classes to both limit lines and allow wrapping (e.g., using a line-clamp-* utility if available) rather than fully unbounded wrapping. Otherwise, this change trades one UI issue (overflow) for another (unbounded height).

Suggestion

Consider constraining the text to a small number of lines while still permitting wrapping, for example by using a line clamp utility if your Tailwind setup includes it, such as line-clamp-2 break-words, so the card doesn't grow arbitrarily tall for long inputs:

<h5 className="text-muted-foreground text-xs break-words line-clamp-2">{query}</h5>

If your design system prefers a different max-line behavior, adjust the clamp value accordingly. Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change or a variant tailored to your Tailwind configuration.

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Improve error handling for invalid JSON Improve error handling for invalid JSON content. Instead of returning null, log the error and render a fallback UI to inform the user that the content could not be displayed. components/copilot-display.tsx [13-29] try { const json = JSON.parse(content) const formDataEntries = Object.entries(json) const query = formDataEntries .filter(([key, value]) => value === 'on' || key === 'additional_query') .map(([key, value]) => (key === 'additional_query' ? value : key)) .join(', ') return ( <Card className="p-3 md:p-4 w-full flex justify-between items-center"> <h5 className="text-muted-foreground text-xs break-words">{query}</h5> <Check size={16} className="text-green-500 w-4 h-4" /> </Card> ) } catch (error) { - return null + console.error('Failed to parse CopilotDisplay content:', error) + return ( + <Card className="p-3 md:p-4 w-full flex justify-between items-center"> + <h5 className="text-destructive text-xs break-words"> + Error displaying content + </h5> + </Card> + ) } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that silent failure on JSON parsing is not ideal and proposes a more robust error handling strategy by logging the error and displaying a fallback UI.	Medium
More