fix: prevent PermissionShield tooltip from getting clipped - #1771
Conversation
Signed-off-by: Rishi Raj <rishiraj438gt@gmail.com>
📝 WalkthroughWalkthroughThe permissions tooltip now selects fallback positions and prevents overflow using viewport boundaries, alternate-axis handling, and 8px padding. ChangesTooltip placement
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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 |
![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
🧹 Nitpick comments (1)
src/custom/permissions.tsx (1)
431-436: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse
rootBoundaryfor the viewport constraint.
preventOverflow.rootBoundaryis the typed Popper option for constraining the popper against'viewport'or'document'. Use it here instead ofboundary: 'viewport'.Proposed change
options: { - boundary: 'viewport', + rootBoundary: 'viewport', altAxis: true, padding: 8🤖 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 `@src/custom/permissions.tsx` around lines 431 - 436, Update the preventOverflow options in the permissions configuration to use the typed rootBoundary option with the existing viewport constraint, replacing boundary while preserving altAxis and padding.
🤖 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 `@src/custom/permissions.tsx`:
- Around line 431-437: Update the tooltip styling near the preventOverflow
configuration to remove the fixed minWidth of 300 and make its width responsive
to the available viewport space, while preserving the existing 12px padding and
16px overflow boundary behavior. Ensure the tooltip can shrink on narrow or
zoomed viewports instead of clipping.
---
Nitpick comments:
In `@src/custom/permissions.tsx`:
- Around line 431-436: Update the preventOverflow options in the permissions
configuration to use the typed rootBoundary option with the existing viewport
constraint, replacing boundary while preserving altAxis and padding.
🪄 Autofix
❌ Autofix failed (check again to retry)
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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 99c7f071-a679-4f85-ac3d-96c01a554d1c
📒 Files selected for processing (1)
src/custom/permissions.tsx
| name: 'preventOverflow', | ||
| enabled: true, | ||
| options: { | ||
| boundary: 'viewport', | ||
| altAxis: true, | ||
| padding: 8 | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Make the tooltip width responsive.
preventOverflow can reposition the popper, but it cannot shrink it. The tooltip still sets minWidth: 300 at Line [446] and padding: '12px' at Line [447]. If the CSS viewport is narrower than the rendered tooltip width plus the 16px boundary padding, the tooltip still clips. This leaves the zoomed-screen case unresolved.
Proposed change
sx={{
- maxWidth: 360,
- minWidth: 300,
+ boxSizing: 'border-box',
+ maxWidth: 'min(360px, calc(100vw - 16px))',
+ minWidth: 'min(300px, calc(100vw - 16px))',🤖 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 `@src/custom/permissions.tsx` around lines 431 - 437, Update the tooltip
styling near the preventOverflow configuration to remove the fixed minWidth of
300 and make its width responsive to the available viewport space, while
preserving the existing 12px padding and 16px overflow boundary behavior. Ensure
the tooltip can shrink on narrow or zoomed viewports instead of clipping.
|
An unexpected error occurred while generating fixes: Not Found - https://docs.github.com/rest/git/refs#get-a-reference |
2 participants
Description
The PermissionShield tooltip gets clipped when rendered near viewport edges — especially on zoomed screens or when the shield icon is near the top/bottom of the screen (e.g. Identity section in the navigation menu with many sub-items).
Changes
Added Popper flip and preventOverflow modifiers to the PermissionShield tooltip:
Testing
Before
After
Screen.Recording.2026-08-04.at.11.08.16.PM.mov