From b5399dc9a200aeae72cce9326db18beaa3973f2e Mon Sep 17 00:00:00 2001
From: Mallya <mallyamoni035@gmail.com>
Date: Thu, 28 May 2026 04:35:54 +0530
Subject: [PATCH] fix(heatmap): flip tooltip left when near right viewport edge
 (#1046)

---
 src/components/ContributionHeatmap.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index f0b68eed..5ec3fd2a 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -276,6 +276,7 @@ export default function ContributionHeatmap({
                   const dayIndex = index % 7;
                   const isFuture = cell.date > today;
                   const showTooltipBelow = dayIndex < 2;
+                  const isNearRightEdge = weekIndex >= weekCount - 3;
                   const tooltip = `${cell.date.toLocaleDateString("en-US", {
                     weekday: "short",
                     month: "short",
@@ -313,8 +314,12 @@ export default function ContributionHeatmap({
                     >
                       {!isFuture && (
                         <span
-                          className={`pointer-events-none absolute left-1/2 z-50 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-[var(--foreground)] px-2 py-1 text-[11px] text-[var(--background)] shadow-lg group-hover:block group-focus:block ${
+                          className={`pointer-events-none absolute z-50 hidden whitespace-nowrap rounded-md bg-[var(--foreground)] px-2 py-1 text-[11px] text-[var(--background)] shadow-lg group-hover:block group-focus:block ${
                             showTooltipBelow ? "top-full mt-2" : "bottom-full mb-2"
+                          } ${
+                            isNearRightEdge
+                              ? "right-0 translate-x-0"
+                              : "left-1/2 -translate-x-1/2"
                           }`}
                         >
                           {tooltip}