Fix self-delete tooltip clipped in EPeople table#1373
Conversation
The disabled delete button's ngbTooltip renders inside the table's .table-responsive wrapper, which has overflow-x: auto — clipping the tooltip popover since the button sits near the table's right edge. Add container="body" so the tooltip is appended to <body> instead, escaping the overflow-clipped ancestor (same convention already used elsewhere in this codebase, e.g. health-status and orcid-queue). Fixes dataquest-dev/dspace-customers#800 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughDisabled self-delete warning tooltips in the epeople registry and eperson form now explicitly use the document body as their rendering container. ChangesSelf-delete tooltip behavior
Estimated code review effort: 1 (Trivial) | ~2 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
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 |
There was a problem hiding this comment.
Pull request overview
This PR fixes a UI bug where the “self-delete” disabled tooltip in the EPeople registry was being clipped by an overflowing table container by ensuring the tooltip is rendered in the document body.
Changes:
- Add
container="body"to the self-deletengbTooltipin the EPeople registry table so the tooltip isn’t clipped by the responsive table wrapper. - Add the same
container="body"configuration to the self-delete tooltip in the EPerson edit form for consistent behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html | Renders the self-delete tooltip in body so it won’t be constrained by parent layout/overflow in the edit form. |
| src/app/access-control/epeople-registry/epeople-registry.component.html | Renders the self-delete tooltip in body to prevent clipping near the right edge of the responsive table. |
Problem
When hovering the disabled delete button on your own row in the EPeople registry, the tooltip explaining why it's disabled ("You cannot delete your own EPerson account.") is visually clipped — only part of the text is visible.
Root cause
The tooltip (
ngbTooltip) is rendered inside the table's.table-responsivewrapper, which hasoverflow-x: auto(Bootstrap default). Since the delete button sits near the table's right edge, the tooltip popover extends past the wrapper's bounds and gets clipped by that overflow.Fix
Add
container="body"to thengbTooltipdirective on both delete entry points (EPeople registry list and the individual EPerson edit form), so the tooltip is appended to<body>instead of the clipped ancestor. This is the same convention already used elsewhere in this codebase for the same reason (e.g.health-status,orcid-queuecomponents).Test plan
yarn run lint— passesyarn run test:headless— full suite (5465 tests) passesyarn run build:prod— succeedsFixes dataquest-dev/dspace-customers#800
Summary by CodeRabbit