[UI] Permission Shield tooltip uses fixed `placement="top"` instead of adaptive placement

Open Beginner friendly
#1,772 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
react, typescript
Domain
frontend

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.

Description

component/ui help wanted kind/enhancement

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, or right whenever 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

Image
Contributor Guides and Resources
Dominant language
TypeScript
Stars
137
Forks
239
Avg merge
4d 14h
Merged PRs (30d)
5

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from layer5io/sistent

All issues in layer5io/sistent

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.