Fix placeholder cutoff and align action buttons in chat UI

[vdimarco]

Summary

• Fix placeholder cutoff and align action buttons in chat UI
• Improve text truncation handling for PR info to ensure consistent header layout on all screen sizes
• Prevent wrapping on key action controls (Merge, Address Feedback) to maintain alignment across components

Changes

Code Review UI

• CodeReviewView: adjust header container to overflow-hidden, make left area flex-1, and keep right-side actions from wrapping
• AddressFeedbackDialog: ensure default trigger button uses whitespace-nowrap to prevent label wrapping
• MergeButton: wrap in a non-wrapping container and apply whitespace-nowrap to inner elements to maintain a single-line button group
• SecondaryPanel: align PR info header with overflow-hidden and shrink-0 on action area to preserve row alignment

Follow-up Tool

• SuggestFollowupTaskTool: make title area flex-1 and prevent wrapping; use min-w-0 on title for proper ellipsis behavior

Rationale

• Prevents long titles and labels from being cut off or wrapping unexpectedly, ensuring a clean, single-line header with properly aligned action buttons across the chat UI

Testing Plan

• Verify long PR titles and labels display with ellipsis rather than wrapping in Code Review header
• Ensure Address Feedback trigger button stays on one line and maintains compact sizing
• Verify Merge button group remains on a single line and aligns with PR title in both Code Review and Secondary panels
• Test across breakpoints (mobile and desktop) to ensure consistent layout
• Check no regressions in chat code-review components (layout, spacing, and responsiveness)

🌿 Generated by Terry

---

ℹ️ Tag @terragon-labs to ask questions and address PR feedback

📎 Task: https://terragon-www-production.up.railway.app/task/3d35a11a-c38a-4918-b5b6-4b89a37fd426

Greptile Overview

Greptile Summary

This PR applies focused CSS flexbox and overflow improvements to prevent text cutoff and maintain consistent button alignment in the chat UI's code review components.

Key Changes:

• Applied overflow-hidden to header containers and flex-1 to title areas to enable proper text truncation with ellipsis
• Added shrink-0 to action button containers (Address Feedback, Merge Button) to prevent wrapping
• Used whitespace-nowrap on buttons and button groups to maintain single-line layout
• Applied min-w-0 on title spans to enable proper ellipsis behavior in flex containers

Impact:
The changes are minimal, surgical CSS adjustments that improve layout stability across different screen sizes without modifying component logic, behavior, or styling beyond layout properties. All changes follow React/Tailwind best practices and maintain consistency with the existing codebase patterns.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk - contains only CSS layout improvements
• Score reflects that changes are purely cosmetic CSS/layout adjustments using standard Tailwind utilities (overflow-hidden, flex-1, shrink-0, whitespace-nowrap, min-w-0) with no logic changes, no new dependencies, and no potential for runtime errors
• No files require special attention - all changes are straightforward layout improvements

Important Files Changed

Filename	Overview
apps/www/src/components/chat/code-review-view.tsx	Improved header layout with overflow-hidden and flex-1 on title area, wrapped MergeButton in shrink-0 container to prevent wrapping
apps/www/src/components/chat/code-review/address-feedback-dialog.tsx	Added whitespace-nowrap to default trigger button to prevent label wrapping
apps/www/src/components/chat/code-review/merge-button.tsx	Applied whitespace-nowrap to container and inner button to maintain single-line button group
apps/www/src/components/chat/secondary-panel.tsx	Aligned PR info header with overflow-hidden, added flex-1 to left area and shrink-0 to action buttons to preserve row alignment
apps/www/src/components/chat/tools/suggest-followup-task-tool.tsx	Made title area flex-1 with min-w-0 on title span for proper ellipsis behavior when title is too long

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant CodeReviewView
    participant SecondaryPanel
    participant MergeButton
    participant AddressFeedbackDialog
    participant SuggestFollowupTaskTool

    User->>Browser: Views PR in chat UI
    Browser->>CodeReviewView: Render with long PR title
    CodeReviewView->>CodeReviewView: Apply overflow-hidden to header
    CodeReviewView->>CodeReviewView: Set flex-1 on title area
    CodeReviewView->>AddressFeedbackDialog: Render trigger button
    AddressFeedbackDialog->>AddressFeedbackDialog: Apply whitespace-nowrap
    CodeReviewView->>MergeButton: Render in shrink-0 container
    MergeButton->>MergeButton: Apply whitespace-nowrap to button group
    CodeReviewView->>Browser: Display header with proper truncation
    
    User->>Browser: Views Secondary Panel
    Browser->>SecondaryPanel: Render PR header
    SecondaryPanel->>SecondaryPanel: Apply overflow-hidden to header
    SecondaryPanel->>SecondaryPanel: Set flex-1 on left area
    SecondaryPanel->>AddressFeedbackDialog: Render with shrink-0
    SecondaryPanel->>MergeButton: Render with shrink-0
    SecondaryPanel->>Browser: Display aligned action buttons
    
    User->>Browser: Views Follow-up Task suggestion
    Browser->>SuggestFollowupTaskTool: Render with long title
    SuggestFollowupTaskTool->>SuggestFollowupTaskTool: Apply flex-1 to title area
    SuggestFollowupTaskTool->>SuggestFollowupTaskTool: Apply min-w-0 for ellipsis
    SuggestFollowupTaskTool->>Browser: Display with proper text truncation

Loading

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

Warning

Rate limit exceeded

@vdimarco has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 2 minutes and 49 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch gatewayz-code/fix-placeholder-alignment-z6dlh5

---

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