[WEB-5606] fix: work item preview word break #8537
Conversation
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
📝 WalkthroughWalkthroughA CSS class update applied to the work item name heading in the issues preview card component. The Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 @apps/web/core/components/issues/preview-card/root.tsx:
- 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.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/core/components/issues/preview-card/root.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,mts,cts}
📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
**/*.{ts,tsx,mts,cts}: Useconsttype parameters for more precise literal inference in TypeScript 5.0+
Use thesatisfiesoperator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicitisreturn types in filter/check functions
UseNoInfer<T>utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing inswitch(true)blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacyexperimentalDecorators
Useusingdeclarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Usewith { type: "json" }for import attributes; avoid deprecatedassertsyntax (TypeScript 5.3/5.8+)
Useimport typeexplicitly when importing types to ensure they are erased during compilation, respectingverbatimModuleSyntaxflag
Use.ts,.mts,.ctsextensions inimport typestatements (TypeScript 5.2+)
Useimport type { Type } from "mod" with { "resolution-mode": "import" }for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize newSetmethods likeunion,intersection, etc., when available (TypeScript 5.5+)
UseObject.groupBy/Map.groupBystandard methods for grouping instead of external libraries (TypeScript 5.4+)
UsePromise.withResolvers()for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted,toSpliced,with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields viasuperin classes (TypeScript 5....
Files:
apps/web/core/components/issues/preview-card/root.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Enable TypeScript strict mode and ensure all files are fully typed
Files:
apps/web/core/components/issues/preview-card/root.tsx
**/*.{js,jsx,ts,tsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier with Tailwind plugin for code formatting, run
pnpm fix:format
Files:
apps/web/core/components/issues/preview-card/root.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately
Files:
apps/web/core/components/issues/preview-card/root.tsx
⏰ 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). (3)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Build packages
- GitHub Check: Analyze (javascript)
| </div> | ||
| <div> | ||
| <h6 className="text-13">{workItem.name}</h6> | ||
| <h6 className="text-13 wrap-break-word">{workItem.name}</h6> |
There was a problem hiding this comment.
🧩 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 10Repository: 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 -30Repository: 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.
| <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.
There was a problem hiding this comment.
Pull request overview
This PR attempts to fix overflowing work item titles in the work item preview card by adding a CSS class to enable word breaking.
Changes:
- Added
wrap-break-wordCSS class to the work item title element in the preview card component
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </div> | ||
| <div> | ||
| <h6 className="text-13">{workItem.name}</h6> | ||
| <h6 className="text-13 wrap-break-word">{workItem.name}</h6> |
There was a problem hiding this comment.
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.
| <h6 className="text-13 wrap-break-word">{workItem.name}</h6> | |
| <h6 className="text-13 break-words">{workItem.name}</h6> |
Description
This PR fixes overflowing work item title in the work item preview card.
Type of Change
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.