From e5faa0d2c4df522ea981787a7da8076e6e024ec4 Mon Sep 17 00:00:00 2001
From: Laode Muhammad Al Fatih <lamualfa@gmail.com>
Date: Mon, 16 Dec 2024 16:35:18 +0700
Subject: [PATCH] [@mantine/core] FloatingIndicator: fix translate calculations

---
 .../use-floating-indicator.ts                 | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/@mantine/core/src/components/FloatingIndicator/use-floating-indicator.ts b/packages/@mantine/core/src/components/FloatingIndicator/use-floating-indicator.ts
index e99a9f5ee8..9d1586ab60 100644
--- a/packages/@mantine/core/src/components/FloatingIndicator/use-floating-indicator.ts
+++ b/packages/@mantine/core/src/components/FloatingIndicator/use-floating-indicator.ts
@@ -1,6 +1,7 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type RefObject } from 'react';
 import { useMutationObserver, useTimeout } from '@mantine/hooks';
 import { getEnv } from '../../core';
+import { toInt } from '../ScrollArea/utils';
 
 function isParent(
   parentElement: HTMLElement | EventTarget | null,
@@ -41,25 +42,31 @@ export function useFloatingIndicator({
   );
 
   const updatePosition = () => {
-    if (!target || !parent) {
+    if (!target || !parent || !ref.current) {
       return;
     }
 
     const targetRect = target.getBoundingClientRect();
     const parentRect = parent.getBoundingClientRect();
 
+    const targetComputedStyle = window.getComputedStyle(target);
+    const parentComputedStyle = window.getComputedStyle(parent);
+
+    const borderTopWidth =
+      toInt(targetComputedStyle.borderTopWidth) + toInt(parentComputedStyle.borderTopWidth);
+    const borderLeftWidth =
+      toInt(targetComputedStyle.borderLeftWidth) + toInt(parentComputedStyle.borderLeftWidth);
+
     const position = {
-      top: targetRect.top - parentRect.top,
-      left: targetRect.left - parentRect.left,
+      top: targetRect.top - parentRect.top - borderTopWidth,
+      left: targetRect.left - parentRect.left - borderLeftWidth,
       width: targetRect.width,
       height: targetRect.height,
     };
 
-    if (ref.current) {
-      ref.current.style.transform = `translateY(${position.top}px) translateX(${position.left}px)`;
-      ref.current.style.width = `${position.width}px`;
-      ref.current.style.height = `${position.height}px`;
-    }
+    ref.current.style.transform = `translateY(${position.top}px) translateX(${position.left}px)`;
+    ref.current.style.width = `${position.width}px`;
+    ref.current.style.height = `${position.height}px`;
   };
 
   const updatePositionWithoutAnimation = () => {