fix(layers): truncate long layer names - #1591
Conversation
|
Warning Review limit reached
Next review available in: 14 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe layer panel now constrains group, viewport, and card widths. Long layer names shrink and truncate without displacing type labels or expanding the panel. End-to-end coverage verifies ellipsis styling and layout bounds. ChangesLayer panel overflow handling
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
🔍 Cloudflare PR preview
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Code reviewBugs
Security
Performance
Quality
CLAUDE.md
|
- Preserve drag-reorder indicators by removing unnecessary overflow clipping. - Document the Radix content-wrapper sizing dependency.
🔍 GitHub Pages PR preview
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@apps/geolibre-desktop/src/components/panels/LayerPanel.tsx`:
- Line 2543: Update the viewportClassName Tailwind utilities to use v4 important
suffix syntax, replacing the legacy [&>div]:!block, [&>div]:!w-full, and
[&>div]:!min-w-0 forms with the corresponding block!, w-full!, and min-w-0!
utilities while preserving the [&>div] selector.
In `@e2e/layer-panel.spec.ts`:
- Around line 73-81: Update the assertions around renamedRow and panel to verify
the panel itself remains within the viewport after renaming, not merely that the
row fits inside it. Capture or compare the panel’s width before and after the
rename, or validate both panel edges against the viewport; include the left-edge
boundary check so RTL layouts are covered.
🪄 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: ASSERTIVE
Plan: Pro Plus
Run ID: 829c9979-cd95-4968-95d8-0323d98a0945
📒 Files selected for processing (3)
apps/geolibre-desktop/src/components/panels/LayerPanel.tsxe2e/layer-panel.spec.tspackages/ui/src/components/scroll-area.tsx
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 `@apps/geolibre-desktop/src/components/panels/LayerPanel.tsx`:
- Line 2699: Update the card className width logic near the grouped card
rendering so cards with group set do not combine w-full with ms-4 and exceed the
scroll content width. Use automatic width for grouped cards or subtract the
indentation amount, while preserving full width for ungrouped cards.
🪄 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: ASSERTIVE
Plan: Pro Plus
Run ID: 505ba0b2-6129-4e03-9247-34f48e8351b0
📒 Files selected for processing (1)
apps/geolibre-desktop/src/components/panels/LayerPanel.tsx
|
Both inline comments posted successfully. Code reviewBugs
Security
Performance
Quality
CLAUDE.md
Overall the core fix (Radix viewport table-sizing override plus |
- Keep grouped layer cards within the indented panel width. - Assert the Layers panel bounds stay unchanged after renaming. - Use Tailwind v4 important modifier syntax.
- Reuse the established scoped Radix viewport selector. - Constrain long group names and grouped layer rows within the panel.
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 `@e2e/layer-panel.spec.ts`:
- Around line 77-92: Extend the visibility predicate around renamedRow to locate
the layer type badge and opacity slider, assert both are visible, and verify
each is contained within renamedRow alongside the existing panel bounds and
truncation checks.
🪄 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: ASSERTIVE
Plan: Pro Plus
Run ID: 778d9f9a-d58b-4d37-8f75-6b1b057c4e2f
📒 Files selected for processing (2)
apps/geolibre-desktop/src/components/panels/LayerPanel.tsxe2e/layer-panel.spec.ts
Code reviewBugs: None found. The width/margin interplay for grouped vs. ungrouped rows ( Security: None — purely CSS/layout changes, no new user input handling. Performance: None — no additional renders, listeners, or expensive computations introduced. Quality:
CLAUDE.md: No violations found. The change stays within |
- Assert the layer type badge and opacity slider remain visible and contained. - Document why grouped rows intentionally omit full-width sizing.
| <ScrollArea | ||
| className="flex-1 [&_[data-radix-scroll-area-viewport]>div]:block! [&_[data-radix-scroll-area-viewport]>div]:w-full! [&_[data-radix-scroll-area-viewport]>div]:min-w-0!" | ||
| // Radix measures scroll content with an injected display:table | ||
| // wrapper. Opt this viewport into block sizing so long layer names | ||
| // cannot establish a wider min-content table. | ||
| > |
There was a problem hiding this comment.
This CSS workaround targets an undocumented Radix internal (data-radix-scroll-area-viewport > div gets display:table from an inline style to support horizontal auto-sizing). It's a real and known quirk, and the override is technically sound (the !important suffix is needed to beat Radix's inline style), but two things worth considering:
- Scope: this is applied only at this one
ScrollAreacall site. A quick grep shows ~22 other components in this app also renderScrollArea(StylePanel,BrowserPanel,StyleManagerPanel,AttributeTable, etc.), several of which also truncate long text inside flex rows. If any of them hit the same "table wrapper lets truncated content force a min-content table width" issue, they'll need to duplicate this exact snippet. Moving the override into the sharedpackages/ui/src/components/scroll-area.tsxprimitive (gated behind a prop, or simply as the default) would fix it once for every consumer instead of per call site. - Fragility: since this couples to
@radix-ui/react-scroll-area's internal DOM structure rather than a public API, a future bump could change/remove the wrapper div and silently reintroduce the panel-widening regression with no compile-time signal — only the new e2e test would catch it (and only iftest:e2eruns on every dependency bump PR).
Not blocking — just flagging as a maintainability trade-off given how many other panels share this primitive.
Code reviewBugs: None found. The Security: None applicable — pure CSS/layout change plus a Playwright test. Performance: No concerns; the change is class-name-only, no new renders, listeners, or observers. Quality:
CLAUDE.md: No violations — logical The new e2e test ( |
Summary
Verification
npm run buildnpx playwright test e2e/layer-panel.spec.ts --grep "long layer names"pre-commit run --files apps/geolibre-desktop/src/components/panels/LayerPanel.tsx packages/ui/src/components/scroll-area.tsx e2e/layer-panel.spec.tsus_cities.geojsonin light and dark themes at default and narrowed Layers panel widthsFixes #1586
Summary by CodeRabbit
Bug Fixes
Tests