Fix UI overflow in Copilot and EmptyScreen components #511
Conversation
Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ❌ Deployment failed View logs |
qcx | f71f4c5 | Feb 09 2026, 09:53 AM |
|
|
WalkthroughReplaces truncation classes with wrapping behavior and tightens mobile spacing/padding across UI components and global styles; no functional logic or exported API changes. Changes
Sequence Diagram(s)(Skipped — changes are styling-only and do not introduce multi-component control-flow requiring a sequence diagram.) Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested Labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![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 `@components/copilot.tsx`:
- Line 128: Replace the invalid Tailwind class on the paragraph element: change
the className value on the <p className="text-lg text-foreground text-semibold
ml-2 break-words"> JSX node to use font-semibold instead of text-semibold so the
semibold weight is applied (i.e., swap text-semibold → font-semibold).
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
verification_mobile.pngis excluded by!**/*.png
📒 Files selected for processing (2)
components/copilot.tsxcomponents/empty-screen.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
components/empty-screen.tsx (1)
components/ui/button.tsx (1)
ButtonProps(36-40)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Workers Builds: qcx
🔇 Additional comments (4)
components/empty-screen.tsx (1)
44-44: LGTM — wrapping and alignment classes are appropriate.Adding
whitespace-normal text-leftto the link-variant button correctly allows long example prompts to wrap naturally and align consistently.components/copilot.tsx (3)
101-103: LGTM — error text wrapping is appropriate.Replacing truncation with
whitespace-normal break-wordsensures full error messages are visible to the user instead of being cut off.
114-123: LGTM — completed query display wraps correctly.The parent
flex-1 min-w-0combined withwhitespace-normal break-wordson the<h5>properly constrains and wraps long query text while keeping the check icon aligned.
148-153: LGTM — option labels now wrap properly.Replacing
whitespace-nowrapwithwhitespace-normal break-wordson checkbox labels correctly allows long option text to wrap within the flex container.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| <Card className="p-4 rounded-lg w-full mx-auto"> | ||
| <div className="mb-4"> | ||
| <p className="text-lg text-foreground text-semibold ml-2"> | ||
| <p className="text-lg text-foreground text-semibold ml-2 break-words"> |
There was a problem hiding this comment.
text-semibold is not a valid Tailwind utility — use font-semibold.
text-semibold will be silently ignored. The correct Tailwind class for semibold font weight is font-semibold.
Proposed fix
- <p className="text-lg text-foreground text-semibold ml-2 break-words">
+ <p className="text-lg text-foreground font-semibold ml-2 break-words">📝 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.
| <p className="text-lg text-foreground text-semibold ml-2 break-words"> | |
| <p className="text-lg text-foreground font-semibold ml-2 break-words"> |
🤖 Prompt for AI Agents
In `@components/copilot.tsx` at line 128, Replace the invalid Tailwind class on
the paragraph element: change the className value on the <p className="text-lg
text-foreground text-semibold ml-2 break-words"> JSX node to use font-semibold
instead of text-semibold so the semibold weight is applied (i.e., swap
text-semibold → font-semibold).
![charliecreates[bot]](https://avatars.githubusercontent.com/in/1140780?s=60&v=4){kind=small}
There was a problem hiding this comment.
The changes are directionally correct for fixing overflow, but components/copilot.tsx applies break-words to the question text without also ensuring wrapping via whitespace-normal, which may make the fix less reliable/inconsistent compared to the other updated headers.
Additional notes (2)
- Readability |
components/copilot.tsx:128-131
break-wordsonly affects line breaking when wrapping is allowed; without explicitly opting into wrapping, long strings can still overflow depending on the element’s defaultwhite-space. You fixed this for other headers by usingwhitespace-normal break-words, but the question<p>only addsbreak-words.
For consistency (and to make the behavior more robust across browsers/content), consider adding whitespace-normal here as well.
- Compatibility |
components/empty-screen.tsx:41-47
Addingwhitespace-normalenables wrapping, but on some button/link implementations the child text can still refuse to shrink unless the button hasmin-w-0(or the text node is wrapped in an element withmin-w-0). If this button is inside a constrained container, long headings could still cause horizontal overflow in edge cases.
Summary of changes
What changed
components/copilot.tsx
- Updated text elements to wrap instead of truncating:
- Replaced
truncatewithwhitespace-normal break-wordsfor the error header and completed state header. - Added
break-wordsto the question<p>to prevent long question strings from overflowing. - Replaced option label styling from
whitespace-nowraptowhitespace-normal break-wordsso long option labels can wrap.
- Replaced
components/empty-screen.tsx
- Updated example message
Buttonstyling to allow wrapping and left alignment:- Added
whitespace-normal text-leftto ensure long headings wrap within the button.
- Added
Assets
- Added
verification_mobile.pngas a visual verification artifact.
- Fixed text wrapping in `Copilot` and `EmptyScreen` by replacing `whitespace-nowrap` and `truncate` with `whitespace-normal break-words`. - Reduced mobile UI padding and heights to save vertical space: - `.mobile-icons-bar` height: 60px -> 48px. - `.mobile-chat-input-area` and `.mobile-chat-input` padding: 10px -> 4px. - `.mobile-chat-messages-area` padding: 12px -> 8px. - `EmptyScreen` vertical margins and spacing reduced. - Optimized `ChatPanel` for mobile: - Reduced `min-h-12` to `min-h-10`. - Adjusted internal paddings (`pl-4`, `pr-10`, `pt-2`) to remove empty space left by relocated attachment buttons. Closes #506 Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
- Removed nested paddings in `components/chat-panel.tsx` mobile form. - Reduced `.mobile-chat-input-area` padding to 2px and set `.mobile-chat-input` padding to 0 in `app/globals.css`. - This significantly reduces the vertical and horizontal space occupied by the chat input area on mobile devices. Closes #506 Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/globals.css (1)
167-178: 🧹 Nitpick | 🔵 TrivialRemove the commented-out
.mobile-chat-sectionblock instead of leaving it as dead code.Commented-out CSS blocks add noise. If this rule set is no longer needed, delete it entirely; version control preserves the history.
♻️ Proposed fix
- /* - .mobile-chat-section { - flex: 1; - width: 100%; - overflow-y: auto; - padding: 8px; - padding-bottom: 60px; - box-sizing: border-box; - background-color: hsl(var(--card)); - color: hsl(var(--card-foreground)); - } - */
🤖 Fix all issues with AI agents
In `@components/chat-panel.tsx`:
- Line 243: In the class list inside components/chat-panel.tsx (the string
containing 'resize-none w-full rounded-fill ...'), replace the incorrect
Tailwind class 'rounded-fill' with the correct 'rounded-full' so the element
receives proper border-radius; update the class string where it's used (the
className on the chat input/textarea element) to use 'rounded-full'.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
app/globals.csscomponents/chat-panel.tsxcomponents/empty-screen.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
app/globals.css (2)
components/chat.tsx (2)
Chat(29-216)checkMobile(56-70)tests/responsive.spec.ts (2)
test(94-191)test(193-225)
components/empty-screen.tsx (1)
components/chat.tsx (1)
setShowEmptyScreen(52-54)
components/chat-panel.tsx (1)
components/chat.tsx (2)
checkMobile(56-70)chatPanelRef(48-50)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Workers Builds: qcx
🔇 Additional comments (6)
components/empty-screen.tsx (2)
36-37: LGTM — tighter spacing aligns with mobile refinements.Reduced padding and margins are consistent with the broader mobile layout tightening in this PR.
44-44: Good fix for text overflow.Adding
whitespace-normal text-leftcorrectly allows long suggested-prompt text to wrap within the button container rather than overflowing. This directly addresses the reported issue#506.app/globals.css (2)
127-127: Verify touch-target clearance after height reduction.The icons bar is now 48px tall while
.icon-buttonelements inside are 40px (lines 228–229). That leaves only 4px vertical clearance on each side — acceptable, but confirm this doesn't clip or cause layout jitter on low-DPI devices with border/padding rounding.
190-212: Very aggressive padding reduction — verify usability on small screens.
mobile-chat-input-areahas only 2px padding andmobile-chat-inputhas 0 padding. Combined withmobile-chat-messages-areaat 8px, the input area will feel noticeably tighter than the messages area. Ensure visual consistency and that the input doesn't appear pressed against the container edges on 320px-wide viewports (iPhone 5/SE test scenario referenced intests/responsive.spec.ts).components/chat-panel.tsx (2)
201-201: LGTM — mobile form layout simplified.Removing padding and using flex centering for the mobile form is consistent with the global CSS padding reductions.
244-246: LGTM — mobile input height and padding adjustments.Reducing
min-h-12tomin-h-10and adjusting padding for mobile is consistent with the overall mobile spacing tightening in this PR.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| data-testid="chat-input" | ||
| className={cn( | ||
| 'resize-none w-full min-h-12 rounded-fill border border-input pl-14 pr-12 pt-3 pb-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', | ||
| 'resize-none w-full rounded-fill border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for rounded-fill usage and definition
rg -n "rounded-fill" --type css --type ts --type js --type tsxRepository: QueueLab/QCX
Length of output: 83
🏁 Script executed:
# Also search for any Tailwind config files that might define custom utilities
fd -e "tailwind.config" -e "tailwind.config.js" -e "tailwind.config.ts" -e "tailwind.config.cjs"Repository: QueueLab/QCX
Length of output: 38
🏁 Script executed:
# Search for any CSS files that might define rounded-fill
rg -n "rounded-fill" --type cssRepository: QueueLab/QCX
Length of output: 38
🏁 Script executed:
# Search for rounded-fill without type restrictions to catch all occurrences
rg -n "rounded-fill"Repository: QueueLab/QCX
Length of output: 857
🏁 Script executed:
# Find and list Tailwind configuration files
find . -type f -name "*tailwind*" | head -20Repository: QueueLab/QCX
Length of output: 76
🏁 Script executed:
# Search for where custom utilities might be defined in the project
rg -n "rounded" --type ts --type js -A 2 -B 2 | head -50Repository: QueueLab/QCX
Length of output: 3666
🏁 Script executed:
# Read the tailwind.config.ts file
cat ./tailwind.config.tsRepository: QueueLab/QCX
Length of output: 2482
🏁 Script executed:
# Also check if there are any CSS files defining rounded-fill
find . -type f \( -name "*.css" -o -name "*.scss" \) -exec grep -l "rounded-fill" {} \;Repository: QueueLab/QCX
Length of output: 38
rounded-fill is not a standard Tailwind class and is not defined as a custom utility — this is a typo for rounded-full.
The Tailwind configuration does not define any custom rounded-fill utility, and no CSS files contain this definition. This will silently produce no border-radius. Change to rounded-full.
🐛 Proposed fix
- 'resize-none w-full rounded-fill border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+ 'resize-none w-full rounded-full border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',📝 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.
| 'resize-none w-full rounded-fill border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', | |
| 'resize-none w-full rounded-full border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', |
🤖 Prompt for AI Agents
In `@components/chat-panel.tsx` at line 243, In the class list inside
components/chat-panel.tsx (the string containing 'resize-none w-full
rounded-fill ...'), replace the incorrect Tailwind class 'rounded-fill' with the
correct 'rounded-full' so the element receives proper border-radius; update the
class string where it's used (the className on the chat input/textarea element)
to use 'rounded-full'.
2 participants
This PR addresses issue #506 where long text in the Copilot and EmptyScreen components was causing UI overflow or truncation.
Key changes:
whitespace-nowrapwithwhitespace-normal break-words. Also updated status headers to replacetruncatewithwhitespace-normal break-wordsto support multi-line titles.whitespace-normal text-left, ensuring that long suggested prompts wrap within the button container instead of overflowing or being cut off.Visual verification was performed by creating a test page with long strings and capturing screenshots using Playwright, confirming that the text now wraps as expected.
PR created automatically by Jules for task 15860545981663021301 started by @ngoiyaeric
Summary by CodeRabbit