From 845b12f786cfb51f7122a3cee2d8c3d3f75f0069 Mon Sep 17 00:00:00 2001
From: root <root@jabali.lan>
Date: Fri, 30 Jan 2026 02:00:19 +0200
Subject: [PATCH] Clamp server chart tooltips inside chart

---
 .../admin/widgets/server-charts.blade.php     | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/resources/views/filament/admin/widgets/server-charts.blade.php b/resources/views/filament/admin/widgets/server-charts.blade.php
index 75cc270..4b4e62d 100644
--- a/resources/views/filament/admin/widgets/server-charts.blade.php
+++ b/resources/views/filament/admin/widgets/server-charts.blade.php
@@ -441,14 +441,17 @@
                         this.tooltipEl.style.opacity = '1';
                         const rect = this.$refs.chart.getBoundingClientRect();
                         const tooltipRect = this.tooltipEl.getBoundingClientRect();
+                        const padding = 8;
                         let left = x + 12;
                         let top = y - tooltipRect.height - 12;
-                        if (left + tooltipRect.width > rect.width) {
+                        if (left + tooltipRect.width + padding > rect.width) {
                             left = x - tooltipRect.width - 12;
                         }
-                        if (top < 0) {
+                        if (top < padding) {
                             top = y + 12;
                         }
+                        left = Math.min(Math.max(padding, left), rect.width - tooltipRect.width - padding);
+                        top = Math.min(Math.max(padding, top), rect.height - tooltipRect.height - padding);
                         this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
                     },
                     hideTooltip() {
@@ -736,14 +739,17 @@
                         this.tooltipEl.style.opacity = '1';
                         const rect = this.$refs.chart.getBoundingClientRect();
                         const tooltipRect = this.tooltipEl.getBoundingClientRect();
+                        const padding = 8;
                         let left = x + 12;
                         let top = y - tooltipRect.height - 12;
-                        if (left + tooltipRect.width > rect.width) {
+                        if (left + tooltipRect.width + padding > rect.width) {
                             left = x - tooltipRect.width - 12;
                         }
-                        if (top < 0) {
+                        if (top < padding) {
                             top = y + 12;
                         }
+                        left = Math.min(Math.max(padding, left), rect.width - tooltipRect.width - padding);
+                        top = Math.min(Math.max(padding, top), rect.height - tooltipRect.height - padding);
                         this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
                     },
                     hideTooltip() {
@@ -902,14 +908,17 @@
                             this.tooltipEl.style.opacity = '1';
                             const rect = this.$refs.chart.getBoundingClientRect();
                             const tooltipRect = this.tooltipEl.getBoundingClientRect();
+                            const padding = 8;
                             let left = x + 12;
                             let top = y - tooltipRect.height - 12;
-                            if (left + tooltipRect.width > rect.width) {
+                            if (left + tooltipRect.width + padding > rect.width) {
                                 left = x - tooltipRect.width - 12;
                             }
-                            if (top < 0) {
+                            if (top < padding) {
                                 top = y + 12;
                             }
+                            left = Math.min(Math.max(padding, left), rect.width - tooltipRect.width - padding);
+                            top = Math.min(Math.max(padding, top), rect.height - tooltipRect.height - padding);
                             this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
                         },
                         hideTooltip() {