Did you clear cache before opening an issue?
Is there an existing issue for this?
Does the issue happen when logged in?
Yes
Does the issue happen when logged out?
No
Does the issue happen in incognito mode when logged in?
Yes
Does the issue happen in incognito mode when logged out?
No
Account name
yuvrajsingh24
Account config
No response
Current Behavior
When hovering over a date near the right edge of the yearly activity heatmap, the test-count tooltip is positioned beyond the visible viewport.
As a result, the tooltip is horizontally clipped and the complete message cannot be read.
For example, when hovering over the latest/today's date, the tooltip displays something similar to:
2 tests on Wednesday 12...
but the remaining text is cut off because the tooltip extends beyond the right side of the screen.
Expected Behavior
The tooltip should remain completely visible within the viewport.
If there is not enough space to display the tooltip on the right side of the hovered date, it should automatically reposition itself to the left or otherwise adjust its position so that the complete message remains readable.
Steps To Reproduce
- Open Monkeytype and navigate to the page containing the yearly activity heatmap.
- Set the heatmap range to Last 12 months.
- Scroll to the activity heatmap calendar.
- Move the cursor over a date near the rightmost edge of the calendar.
- Hover over the latest/today's date or another date close to the right edge.
- Observe the test-count tooltip.
- Notice that the tooltip extends beyond the viewport and part of the text is clipped.
Environment
- OS: Windows
- Browser: Google Chrome
- Browser Version: Version 151.0.7922.76 (Official Build) (64-bit)
Anything else?
The issue appears to be related to the tooltip's positioning when the hovered heatmap cell is close to the right edge of the viewport.
The tooltip works as expected when hovering over dates that have sufficient space around them, but it becomes clipped when there is insufficient space on the right.
A possible solution would be to make the tooltip detect the available viewport space and reposition itself when displaying it near the edge of the screen.
Did you clear cache before opening an issue?
Is there an existing issue for this?
Does the issue happen when logged in?
Yes
Does the issue happen when logged out?
No
Does the issue happen in incognito mode when logged in?
Yes
Does the issue happen in incognito mode when logged out?
No
Account name
yuvrajsingh24
Account config
No response
Current Behavior
When hovering over a date near the right edge of the yearly activity heatmap, the test-count tooltip is positioned beyond the visible viewport.
As a result, the tooltip is horizontally clipped and the complete message cannot be read.
For example, when hovering over the latest/today's date, the tooltip displays something similar to:
2 tests on Wednesday 12...
but the remaining text is cut off because the tooltip extends beyond the right side of the screen.
Expected Behavior
The tooltip should remain completely visible within the viewport.
If there is not enough space to display the tooltip on the right side of the hovered date, it should automatically reposition itself to the left or otherwise adjust its position so that the complete message remains readable.
Steps To Reproduce
Environment
Anything else?
The issue appears to be related to the tooltip's positioning when the hovered heatmap cell is close to the right edge of the viewport.
The tooltip works as expected when hovering over dates that have sufficient space around them, but it becomes clipped when there is insufficient space on the right.
A possible solution would be to make the tooltip detect the available viewport space and reposition itself when displaying it near the edge of the screen.