From 2fa01886da946aba98e42bfb26d2c88150ca107f Mon Sep 17 00:00:00 2001
From: Tiefseemonster <118022040+dmitriisurmin@users.noreply.github.com>
Date: Sun, 27 Nov 2022 01:48:21 +0100
Subject: [PATCH] fix: tooltip overlaps a window border (#599)

---
 web/src/components/UsageHeatMap.tsx | 5 +++++
 web/src/less/usage-heat-map.less    | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/web/src/components/UsageHeatMap.tsx b/web/src/components/UsageHeatMap.tsx
index 7f773ebd..de77055f 100644
--- a/web/src/components/UsageHeatMap.tsx
+++ b/web/src/components/UsageHeatMap.tsx
@@ -64,6 +64,11 @@ const UsageHeatMap = () => {
     tempDiv.style.top = bounding.top - 2 + "px";
     tempDiv.innerHTML = `${item.count} memos on <span className="date-text">${new Date(item.timestamp as number).toDateString()}</span>`;
     document.body.appendChild(tempDiv);
+
+    if (tempDiv.offsetLeft - tempDiv.clientWidth / 2 < 0) {
+      tempDiv.style.left = bounding.left + tempDiv.clientWidth * 0.4 + "px";
+      tempDiv.className += " offset-left";
+    }
   }, []);
 
   const handleUsageStatItemMouseLeave = useCallback(() => {
diff --git a/web/src/less/usage-heat-map.less b/web/src/less/usage-heat-map.less
index 795bbe91..03c2118b 100644
--- a/web/src/less/usage-heat-map.less
+++ b/web/src/less/usage-heat-map.less
@@ -54,6 +54,12 @@
     @apply text-gray-300;
   }
 
+  &.offset-left {
+    &::before {
+      left: calc(10% - 5px);
+    }
+  }
+
   &::before {
     content: "";
     position: absolute;