Skip to content

[WEB-5606] fix: work item preview word break #8537

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

Open
aaryan610 wants to merge 1 commit into
base: preview
Choose a base branch
from
Open

[WEB-5606] fix: work item preview word break #8537

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
2 changes: 1 addition & 1 deletion apps/web/core/components/issues/preview-card/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props:
</div>
</div>
<div>
<h6 className="text-13">{workItem.name}</h6>
<h6 className="text-13 wrap-break-word">{workItem.name}</h6>
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 13, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Search for wrap-break-word definition in Tailwind config files
echo "=== Searching for wrap-break-word in Tailwind config files ==="
find . -type f \( -name "tailwind.config.*" -o -name "tailwind*.js" -o -name "tailwind*.ts" \) -exec grep -l "wrap-break-word" {} \;

# Search for custom utility definitions containing wrap-break-word
echo "=== Searching for wrap-break-word definition in all files ==="
rg "wrap-break-word" -t json -t js -t ts -t css --max-count 20

# Check how many times wrap-break-word is used in the codebase
echo "=== Total occurrences of wrap-break-word ==="
rg "wrap-break-word" --count-matches

# Search for standard Tailwind word-break alternatives to compare
echo "=== Checking for break-words usage (standard Tailwind) ==="
rg "break-words" -t tsx -t ts --max-count 10

Repository: makeplane/plane

Length of output: 511

🏁 Script executed:

#!/bin/bash

# Find Tailwind config files with broader search
echo "=== Finding Tailwind configuration files ==="
find . -type f -name "tailwind.config.*" 2>/dev/null | head -10

# Check for CSS files that might define custom utilities
echo "=== Finding global CSS/Tailwind files ==="
find . -type f \( -name "globals.css" -o -name "global.css" -o -name "tailwind.css" -o -name "*.css" \) | grep -E "(globals|global|tailwind)" | head -10

# Search for any custom class definitions in config files
echo "=== Checking Tailwind config content ==="
find . -type f -name "tailwind.config.*" -exec head -50 {} \; 2>/dev/null

# Verify if break-words is used in the codebase (standard Tailwind alternative)
echo "=== Checking standard Tailwind break-words usage ==="
rg "break-words|break-all|break-normal" --type-list | head -5
rg "break-words|break-all|break-normal" -g "*.tsx" -g "*.ts" -g "*.jsx" -g "*.js" | head -10

# Check Tailwind utilities in the extend section of config
echo "=== Searching for Tailwind extend or utilities config ==="
rg "extend\s*:|theme\s*:" -A 10 --type json --type js --type ts 2>/dev/null | head -30

Repository: makeplane/plane

Length of output: 4614

Replace wrap-break-word with the standard Tailwind class break-words.

wrap-break-word is not a valid Tailwind CSS class and is not defined as a custom utility in this project. The codebase uses standard Tailwind word-breaking classes elsewhere (break-words, break-all). Change line 51 to use break-words instead:

Diff 
-        <h6 className="text-13 wrap-break-word">{workItem.name}</h6>
+        <h6 className="text-13 break-words">{workItem.name}</h6>
📝 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
<h6 className="text-13 wrap-break-word">{workItem.name}</h6>
<h6 className="text-13 break-words">{workItem.name}</h6>
🤖 Prompt for AI Agents 
In @apps/web/core/components/issues/preview-card/root.tsx at line 51, The h6
element rendering workItem.name uses a non-existent Tailwind class
"wrap-break-word"; update the className on that h6 (the JSX element rendering
workItem.name) to replace "wrap-break-word" with the standard Tailwind utility
"break-words" so the text wraps correctly.

Copy link

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

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

The class name wrap-break-word appears to be incorrect. The standard Tailwind CSS class for word breaking is break-words (plural). This is confirmed by checking other occurrences in the codebase where break-words is consistently used for similar purposes (e.g., in delete-issue-modal.tsx, analytics-sidebar, profile components, etc.). Using the incorrect class name means the fix won't work as intended and long work item titles will still overflow.

Suggested change
<h6 className="text-13 wrap-break-word">{workItem.name}</h6>
<h6 className="text-13 break-words">{workItem.name}</h6>

Copilot uses AI. Check for mistakes.
</div>
<div className="flex items-center gap-1 h-5">
<PriorityIcon priority={workItem.priority} withContainer />
Expand Down
Loading