From 3c48c2bd2d5364dd2234da5eb22d7693d31bde3c Mon Sep 17 00:00:00 2001
From: Alex Selimov <alex@alexselimov.com>
Date: Mon, 11 May 2026 22:37:17 -0400
Subject: [PATCH] Fix issues with tooltip position and create partial for
 laying out

---
 assets/js/build_heatmap.js          | 11 ++++++---
 layouts/partials/git-heatmap.html   | 37 ++++++++++++++++++++++++++++
 layouts/shortcodes/git-heatmap.html | 38 +----------------------------
 3 files changed, 45 insertions(+), 41 deletions(-)
 create mode 100644 layouts/partials/git-heatmap.html

diff --git a/assets/js/build_heatmap.js b/assets/js/build_heatmap.js
index 906cbf2..037ca29 100644
--- a/assets/js/build_heatmap.js
+++ b/assets/js/build_heatmap.js
@@ -43,8 +43,10 @@ export function render(weeks, counts) {
   const svgNS = "http://www.w3.org/2000/svg";
   const svg = document.createElementNS(svgNS, "svg");
 
-  svg.setAttribute("width", weeks.length * SHIFT + 30);
-  svg.setAttribute("height", SHIFT * 7 + 20);
+  const svgWidth = weeks.length * SHIFT + 30;
+  const svgHeight = SHIFT * 7 + 20;
+  svg.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
+  svg.setAttribute("width", "100%");
 
   // Place the labels first
   ["Mon", "Wed", "Fri"].forEach((label, i) => {
@@ -85,6 +87,7 @@ export function render(weeks, counts) {
 
 export function setupTooltips(svg) {
   const tooltip = document.getElementById("tooltip");
+  document.body.appendChild(tooltip);
 
   svg.addEventListener("mouseover", (e) => {
     if (e.target.tagName != "rect") return;
@@ -96,8 +99,8 @@ export function setupTooltips(svg) {
   });
 
   svg.addEventListener("mousemove", (e) => {
-    tooltip.style.left = e.pageX + 12 + "px";
-    tooltip.style.top = e.pageY - 28 + "px";
+    tooltip.style.left = e.clientX + 12 + "px";
+    tooltip.style.top = e.clientY - 28 + "px";
   });
 
   svg.addEventListener("mouseout", (e) => {
diff --git a/layouts/partials/git-heatmap.html b/layouts/partials/git-heatmap.html
new file mode 100644
index 0000000..1a7ce96
--- /dev/null
+++ b/layouts/partials/git-heatmap.html
@@ -0,0 +1,37 @@
+{{ $js := resources.Get "js/build_heatmap.js" }}
+{{ $p := .Site.Params.heatmap }}
+
+<style>
+:root {
+  --color-empty: {{ $p.color_empty }};
+  --color-low:   {{ $p.color_low }};
+  --color-mid:   {{ $p.color_mid }};
+  --color-high:  {{ $p.color_high }};
+}
+#heatmap { overflow-x: auto; }
+#heatmap text { font-family: inherit; fill: currentColor; }
+#tooltip {
+  position: fixed;
+  background: #333;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+}
+.hidden { display: none; }
+</style>
+
+<div id="heatmap"></div>
+<script type="module">
+    import {flattenData, constructWeeks, render, setupTooltips} from "{{ $js.RelPermalink }}"
+
+    const data = await fetch("/activity.json").then((r) => r.json());
+    const counts = flattenData(data);
+    const weeks = constructWeeks();
+    const svg = render(weeks, counts);
+    document.getElementById("heatmap").appendChild(svg);
+    setupTooltips(svg);
+</script>
+<div id="tooltip" class="hidden"></div>
+<div id="legend"></div>
diff --git a/layouts/shortcodes/git-heatmap.html b/layouts/shortcodes/git-heatmap.html
index 0000372..7e95ac1 100644
--- a/layouts/shortcodes/git-heatmap.html
+++ b/layouts/shortcodes/git-heatmap.html
@@ -1,37 +1 @@
-{{ $js := resources.Get "js/build_heatmap.js" }}
-{{ $p := .Site.Params.heatmap }}
-
-<style>
-:root {
-  --color-empty: {{ $p.color_empty }};
-  --color-low:   {{ $p.color_low }};
-  --color-mid:   {{ $p.color_mid }};
-  --color-high:  {{ $p.color_high }};
-}
-#heatmap { display: flex; justify-content: center; }
-#heatmap text { font-family: inherit; fill: currentColor; }
-#tooltip {
-  position: fixed;
-  background: #333;
-  color: white;
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  pointer-events: none;
-}
-.hidden { display: none; }
-</style>
-
-<div id="heatmap"></div>
-<script type="module">
-    import {flattenData, constructWeeks, render, setupTooltips} from "{{ $js.RelPermalink }}"
-
-    const data = await fetch("/activity.json").then((r) => r.json());
-    const counts = flattenData(data);
-    const weeks = constructWeeks();
-    const svg = render(weeks, counts);
-    document.getElementById("heatmap").appendChild(svg);
-    setupTooltips(svg);
-</script>
-<div id="tooltip" class="hidden"></div>
-<div id="legend"></div>
+{{ partial "git-heatmap.html" . }}