[UI] Heatmap tooltip is clipped when hovering dates near the right edge

Did you clear cache before opening an issue?

• I have cleared my cache

Is there an existing issue for this?

• I have searched the existing open and closed issues

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

1. Open Monkeytype and navigate to the page containing the yearly activity heatmap.
2. Set the heatmap range to Last 12 months.
3. Scroll to the activity heatmap calendar.
4. Move the cursor over a date near the rightmost edge of the calendar.
5. Hover over the latest/today's date or another date close to the right edge.
6. Observe the test-count tooltip.
7. 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.

Start by locating the yearly activity heatmap and its tooltip positioning logic, then reproduce the issue using the Last 12 months range while hovering the latest date near the right edge. Done means the complete test-count message remains readable within the viewport, including when there is insufficient space on the right.