[UI] Permission Shield tooltip uses fixed `placement="top"` instead of adaptive placement
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 137
- Forks
- 239
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 5
Description
Description
The Permission Shield tooltip currently uses MUI's Tooltip with a fixed placement="top" in the PermissionShield component. This works in some layouts, but is not ideal across different screen sizes and viewport positions.
When the shield icon is close to the top edge (or any viewport boundary), the tooltip can overflow, become partially hidden, or provide a poor user experience because its position never adapts to the available space.
The tooltip should automatically choose the best placement based on the available viewport space instead of always appearing above the trigger.
Current Behavior
- Tooltip is rendered with a fixed
placement="top". - Position does not adapt based on available space.
- On smaller screens or when the trigger is near the viewport edge, the tooltip may be clipped or difficult to view.
Expected Behavior
- Tooltip placement should automatically adjust to the available viewport space.
- It should flip to
bottom,left, orrightwhenever there isn't enough room on top. - The tooltip should remain fully visible across different screen sizes and layouts.
Why this matters
The Permission Shield is used throughout the application, so a fixed placement impacts multiple pages. An adaptive positioning strategy would provide a more consistent and responsive experience wherever the component is used.
Screenshots
Contributor Guides and Resources
- 🛠 Meshery Build & Release Strategy
- 📚 Instructions for contributing to documentation
- 🎨 Wireframes and designs for Sistent site in Figma (open invite)
- 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the PermissionShield component and its MUI Tooltip usage, then inspect how the fixed placement is configured. Check the tooltip near viewport boundaries and across different screen sizes. Done means the tooltip adapts its placement and remains fully visible instead of always appearing above the shield.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100