The rank change tooltip displayed when hovering over a user's rank movement is partially hidden beneath the sticky leaderboard header.
This happens because the tooltip is rendered with a lower stacking order than the table header, causing it to be clipped whenever it overlaps the header area.
Steps to Reproduce
- Open the leaderboard page.
- Hover over a user's rank change badge near the top of the table.
- Move the cursor so the tooltip overlaps the table header.
Expected Behaviour
The tooltip should always render above the sticky table header and remain fully visible.
Actual Behaviour
Part of the tooltip is hidden beneath the sticky table header, making the tooltip difficult to read.
Proposed Solution
Adjust the stacking context so the tooltip is rendered above the sticky table header. This may involve updating the relevant z-index values or creating an appropriate stacking context for the tooltip element.
The rank change tooltip displayed when hovering over a user's rank movement is partially hidden beneath the sticky leaderboard header.
This happens because the tooltip is rendered with a lower stacking order than the table header, causing it to be clipped whenever it overlaps the header area.
Steps to Reproduce
Expected Behaviour
The tooltip should always render above the sticky table header and remain fully visible.
Actual Behaviour
Part of the tooltip is hidden beneath the sticky table header, making the tooltip difficult to read.
Proposed Solution
Adjust the stacking context so the tooltip is rendered above the sticky table header. This may involve updating the relevant
z-indexvalues or creating an appropriate stacking context for the tooltip element.