Fix: Column header overflow and title wrapping in Kanban board by Shironex · Pull Request #693 · AutoMaker-Org/automaker

Shironex · 2026-01-25T11:26:32Z

Summary

Fixes column header inconsistencies in the Kanban board by preventing title wrapping and optimizing header button layout for narrow column widths.

Changes

1. Column Title Handling

Added whitespace-nowrap to column titles to prevent wrapping to multiple lines
Increased minimum column width from 280px to 320px to accommodate longer titles like "Waiting Approval"

2. Verified Column Header Actions

Changed "Complete All" button icon from Archive to CheckCircle2 for better visual distinction
Replaced native title tooltips with proper Tooltip component for both action buttons
Wrapped both buttons (Complete All and Completed Features) with TooltipProvider for consistent UX

3. List View Headers

Applied whitespace-nowrap to list view column headers for consistency

Files Modified

apps/ui/src/components/views/board-view/components/kanban-column.tsx
apps/ui/src/components/views/board-view/kanban-board.tsx
apps/ui/src/components/list-view/list-header.tsx
apps/ui/src/hooks/use-responsive-kanban.ts

Testing

Verified titles no longer wrap at narrow column widths
Verified header actions fit properly in the Verified column
Verified consistent column header heights across all columns
Verified tooltips display correctly on hover

Screenshots

Before: Column titles wrapping and header overflow
After: Consistent column headers with proper tooltips

Closes #691

🤖 Generated with Claude Code

Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com

…ustments - Added tooltips for action buttons in the Kanban board to improve user experience. - Adjusted column title handling to prevent overflow by increasing column width and minimum width. - Updated button icons for better visual clarity and consistency. - Ensured that header labels in list views are now truncated to maintain layout integrity.

coderabbitai · 2026-01-25T11:26:41Z

Warning

Rate limit exceeded

@Shironex has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 10 minutes and 24 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.

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.

❤️ Share

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

gemini-code-assist · 2026-01-25T11:26:48Z

Summary of Changes

Hello @Shironex, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user interface and experience of the Kanban board and list views by addressing several visual inconsistencies and usability issues. The changes ensure that column headers display correctly without wrapping, improve the layout of action buttons in the 'Verified' column, and provide consistent, accessible tooltips across the board, leading to a more polished and functional UI.

Highlights

Kanban Column Titles: Implemented whitespace-nowrap to prevent Kanban column titles from wrapping onto multiple lines, ensuring they remain on a single line for better readability.
Column Width Adjustment: Increased the minimum and default Kanban column widths from 280px/288px to 320px to provide more space for longer titles and prevent overflow.
Verified Column Actions UI: Updated the 'Complete All' button icon from Archive to CheckCircle2 and integrated proper Tooltip components for both action buttons in the 'Verified' column, replacing native title attributes for improved user experience and consistency.
List View Header Consistency: Applied whitespace-nowrap and truncate CSS classes to list view column headers to maintain visual consistency with the Kanban board and prevent text wrapping.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request effectively addresses UI inconsistencies in the Kanban board's column headers. The changes prevent title wrapping, increase column widths to accommodate longer titles, and improve the header actions in the 'Verified' column by using tooltips for better UX on narrow columns. The fix is also consistently applied to list view headers. I have one suggestion to make the fix more robust by adding truncation to prevent long titles from overflowing.

gemini-code-assist · 2026-01-25T11:27:57Z

      >
        <div className={cn('w-2.5 h-2.5 rounded-full shrink-0', colorClass)} />
-        <h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight">{title}</h3>
+        <h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight whitespace-nowrap">


While whitespace-nowrap prevents the title from wrapping, it doesn't handle cases where the title is too long for the column width, which can lead to overflow. To ensure consistency with the list view headers and prevent overflow, you should also add the truncate class. This will add an ellipsis (...) to titles that are too long.

Suggested change

<h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight whitespace-nowrap">

<h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight whitespace-nowrap truncate">

gemini-code-assist Bot reviewed Jan 25, 2026

View reviewed changes

Shironex merged commit a10ddad into v0.14.0rc Jan 25, 2026
8 checks passed

Shironex deleted the feature/bug-fix-columns-overflow-title-wrap-t6j1 branch January 25, 2026 11:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Column header overflow and title wrapping in Kanban board#693

Fix: Column header overflow and title wrapping in Kanban board#693
Shironex merged 1 commit intov0.14.0rcfrom
feature/bug-fix-columns-overflow-title-wrap-t6j1

Shironex commented Jan 25, 2026

Uh oh!

coderabbitai Bot commented Jan 25, 2026

Rate limit exceeded

Uh oh!

gemini-code-assist Bot commented Jan 25, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Jan 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight whitespace-nowrap">
	<h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight whitespace-nowrap truncate">

Conversation

Shironex commented Jan 25, 2026

Summary

Changes

1. Column Title Handling

2. Verified Column Header Actions

3. List View Headers

Files Modified

Testing

Screenshots

Uh oh!

coderabbitai Bot commented Jan 25, 2026

Rate limit exceeded

Uh oh!

gemini-code-assist Bot commented Jan 25, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jan 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant