fix: tooltip overlaps a window border (#599)

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(() => {

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;