From e58bd2ec42e02d15192da9ee8441551a9f698546 Mon Sep 17 00:00:00 2001
From: yusufipk <mail@yusufipek.me>
Date: Sun, 16 Aug 2026 13:45:34 +0300
Subject: [PATCH] Keep the chart tooltip inside the chart at both edges

The tooltip was clamped to a fixed 90px margin while it can grow to 260px,
so bars near the left edge pushed it outside the panel and cut the title and
view count. It now clamps against its measured width and rests against the
chart edge instead of staying centred.
---
 src/panel.js  | 16 ++++++++++++----
 src/style.css |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/panel.js b/src/panel.js
index 4a68b3f..bed590b 100644
--- a/src/panel.js
+++ b/src/panel.js
@@ -64,10 +64,18 @@ var OBPanel = (function () {
         if (item.id === videoId) meta.push(T.t("tipThisVideo"));
         tip.appendChild(el("div", "ob-tip-meta", meta.join(" · ")));
         tip.hidden = false;
-        /* Balon grafiğin içinde konumlanır, kenarlardan taşmaması için
-         * yatayda kırpılır. */
-        var left = slot.offsetLeft + slot.offsetWidth / 2;
-        tip.style.left = Math.min(Math.max(left, 90), chart.offsetWidth - 90) + "px";
+        /* Balon grafiğin içinde kalmalı. Genişliği içeriğe göre değiştiği için
+         * sabit bir paya göre değil, görünür hale geldikten sonra ölçülen
+         * gerçek genişliğe göre sıkıştırılıyor: kenardaki çubuklarda balon
+         * ortalanmak yerine grafiğin kenarına yaslanır. */
+        var center = slot.offsetLeft + slot.offsetWidth / 2;
+        /* Ölçümden önce sola yaslanıyor: absolute kutunun genişliği kalan
+         * alana göre daraldığı için, önceki hover'dan kalan left değeriyle
+         * ölçmek balonu olduğundan dar gösterirdi. */
+        tip.style.left = "0px";
+        var width = tip.offsetWidth;
+        var maxLeft = Math.max(0, chart.offsetWidth - width);
+        tip.style.left = Math.min(Math.max(center - width / 2, 0), maxLeft) + "px";
       });
       slot.addEventListener("click", function () {
         window.open("https://www.youtube.com/watch?v=" + item.id, "_blank", "noopener");
diff --git a/src/style.css b/src/style.css
index 3cd52e8..e13e36a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -154,7 +154,7 @@
 .ob-tip {
   position: absolute;
   bottom: 100%;
-  transform: translateX(-50%);
+  left: 0;
   max-width: 260px;
   padding: 6px 8px;
   border-radius: 6px;