From b57cacb332ce6246f5bc2fff62b809dfccb81b73 Mon Sep 17 00:00:00 2001
From: Isaac <85453899+Isaacmaamouche@users.noreply.github.com>
Date: Thu, 24 Aug 2023 16:01:43 +0200
Subject: [PATCH] Fix: check and use parents scale css for tabs underline
 position (#2178)

* fix: check and use parents scale css

* fix: move refs access back in useEffect

* fix: handle NaN value

* fix: check if window is defined for ssr
---
 packages/Tabs/src/ActiveBar.tsx |  7 +++++--
 packages/Tabs/src/utils.ts      | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 packages/Tabs/src/utils.ts

diff --git a/packages/Tabs/src/ActiveBar.tsx b/packages/Tabs/src/ActiveBar.tsx
index c84a7b76cb..d01f5c9c70 100644
--- a/packages/Tabs/src/ActiveBar.tsx
+++ b/packages/Tabs/src/ActiveBar.tsx
@@ -3,6 +3,7 @@ import { useViewportSize } from '@welcome-ui/utils'
 import { useIsomorphicLayoutEffect } from '@welcome-ui/utils'
 
 import * as S from './styles'
+import { getParentScale } from './utils'
 
 import { UseTabState } from '.'
 
@@ -26,6 +27,7 @@ function useActiveBar(
 
     const listRect = list.getBoundingClientRect()
     const activeTabRect = activeTab.getBoundingClientRect()
+    const scale = getParentScale(list)
 
     if (orientation === 'vertical') {
       const top = activeTabRect.top - listRect.top
@@ -36,8 +38,9 @@ function useActiveBar(
         orientation,
       })
     } else {
-      const left = activeTabRect.left - listRect.left + list.scrollLeft
-      const width = activeTabRect.width
+      const left = (activeTabRect.left - listRect.left + list.scrollLeft) / scale
+      const width = activeTabRect.width / scale
+
       setState({
         size: width,
         offset: left,
diff --git a/packages/Tabs/src/utils.ts b/packages/Tabs/src/utils.ts
new file mode 100644
index 0000000000..865b037668
--- /dev/null
+++ b/packages/Tabs/src/utils.ts
@@ -0,0 +1,14 @@
+//Check if the element, or its parent, has a scale property
+export const getParentScale = (element: HTMLElement | null): number => {
+  //If the element doesn't exist, or if window is undefined, return 1
+  if (!element || typeof window === 'undefined') return 1
+  const elementScale = Number(window.getComputedStyle(element).scale)
+
+  //If the scale property is not unvalid or undefined, return its value
+  //Else check the parent's scale property
+  if (!isNaN(elementScale)) {
+    return elementScale
+  } else {
+    return getParentScale(element.parentElement)
+  }
+}