fix: filterchip wrap#826
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR applies flexbox layout constraints to filter UI components across two CSS files. The Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/raystack/components/filter-chip/filter-chip.module.css`:
- Around line 10-16: The current rule using overflow: clip and max-width: 100%
causes the entire chip to be clipped before its non-shrinking sections (label,
operator, remove button) can shrink; remove or move overflow: clip and
max-width: 100% off the root chip rule and instead make the label/value section
shrinkable and ellipsize: ensure the label container has min-width: 0,
flex-shrink: 1 (or flex: 1 1 auto), and add overflow: hidden; white-space:
nowrap; text-overflow: ellipsis so the text truncates before the chip is
clipped, while keeping the operator/remove button as non-shrinking (e.g., flex:
0 0 auto).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8116ffd9-0626-45b8-aed5-29ddb1d4ec96
📒 Files selected for processing (2)
packages/raystack/components/data-table/data-table.module.csspackages/raystack/components/filter-chip/filter-chip.module.css
| overflow: clip; | ||
| flex-grow: 0; | ||
| width: fit-content; | ||
| min-width: 0px; | ||
| flex-basis: auto; | ||
| flex-shrink: 1; | ||
| max-width: 100%; |
There was a problem hiding this comment.
Don't clip the chip before any of its fixed sections can shrink.
Lines 23-26, 27-36, and 78-89 keep the label, operator, and remove button non-shrinking. With the new overflow: clip and max-width: 100% here, a long filter label can clip the tail of the chip and hide the trailing remove button on narrow layouts. Make the label/value section shrinkable and ellipsize that content before clipping the whole chip.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/filter-chip/filter-chip.module.css` around lines
10 - 16, The current rule using overflow: clip and max-width: 100% causes the
entire chip to be clipped before its non-shrinking sections (label, operator,
remove button) can shrink; remove or move overflow: clip and max-width: 100% off
the root chip rule and instead make the label/value section shrinkable and
ellipsize: ensure the label container has min-width: 0, flex-shrink: 1 (or flex:
1 1 auto), and add overflow: hidden; white-space: nowrap; text-overflow:
ellipsis so the text truncates before the chip is clipped, while keeping the
operator/remove button as non-shrinking (e.g., flex: 0 0 auto).
1 participant
Draft PR