From 36c01fa345b18e5230bff424700fc9f6fc68118b Mon Sep 17 00:00:00 2001
From: isaacmaamouche <maamouche.isaac@gmail.com>
Date: Tue, 8 Aug 2023 16:31:16 +0200
Subject: [PATCH 1/4] fix: check and use parents scale css

---
 packages/Tabs/src/ActiveBar.tsx | 15 +++++++++------
 packages/Tabs/src/utils.ts      |  9 +++++++++
 2 files changed, 18 insertions(+), 6 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..60e8a49dbe 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 '.'
 
@@ -20,13 +21,14 @@ function useActiveBar(
   const [state, setState] = useState({})
   const { height: viewportHeight, width: viewportWidth } = useViewportSize()
 
+  const list = listRef.current
+  const listRect = list?.getBoundingClientRect()
+  const activeTabRect = activeTab?.getBoundingClientRect()
+
   useIsomorphicLayoutEffect(() => {
-    const list = listRef.current
     if (!list || !activeTab) return
 
-    const listRect = list.getBoundingClientRect()
-    const activeTabRect = activeTab.getBoundingClientRect()
-
+    const scale = getParentScale(list)
     if (orientation === 'vertical') {
       const top = activeTabRect.top - listRect.top
       const height = activeTabRect.height
@@ -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..36ed61ba65
--- /dev/null
+++ b/packages/Tabs/src/utils.ts
@@ -0,0 +1,9 @@
+export const getParentScale = (element: HTMLElement | null): number => {
+  if (!element) return 1
+  const elementScale = window.getComputedStyle(element).scale
+  if (elementScale !== 'none') {
+    return Number(elementScale)
+  } else {
+    return getParentScale(element.parentElement)
+  }
+}

From 615682310751ed514f3182015c9c7a7fd8ddeae2 Mon Sep 17 00:00:00 2001
From: isaacmaamouche <maamouche.isaac@gmail.com>
Date: Tue, 8 Aug 2023 16:36:41 +0200
Subject: [PATCH 2/4] fix: move refs access back in useEffect

---
 packages/Tabs/src/ActiveBar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/Tabs/src/ActiveBar.tsx b/packages/Tabs/src/ActiveBar.tsx
index 60e8a49dbe..d01f5c9c70 100644
--- a/packages/Tabs/src/ActiveBar.tsx
+++ b/packages/Tabs/src/ActiveBar.tsx
@@ -21,14 +21,14 @@ function useActiveBar(
   const [state, setState] = useState({})
   const { height: viewportHeight, width: viewportWidth } = useViewportSize()
 
-  const list = listRef.current
-  const listRect = list?.getBoundingClientRect()
-  const activeTabRect = activeTab?.getBoundingClientRect()
-
   useIsomorphicLayoutEffect(() => {
+    const list = listRef.current
     if (!list || !activeTab) return
 
+    const listRect = list.getBoundingClientRect()
+    const activeTabRect = activeTab.getBoundingClientRect()
     const scale = getParentScale(list)
+
     if (orientation === 'vertical') {
       const top = activeTabRect.top - listRect.top
       const height = activeTabRect.height

From b71b181bafed7d9c0b112013624ef84108a2dc12 Mon Sep 17 00:00:00 2001
From: isaacmaamouche <maamouche.isaac@gmail.com>
Date: Tue, 8 Aug 2023 17:24:24 +0200
Subject: [PATCH 3/4] fix: handle NaN value

---
 packages/Tabs/src/utils.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/Tabs/src/utils.ts b/packages/Tabs/src/utils.ts
index 36ed61ba65..fef06be832 100644
--- a/packages/Tabs/src/utils.ts
+++ b/packages/Tabs/src/utils.ts
@@ -1,8 +1,8 @@
 export const getParentScale = (element: HTMLElement | null): number => {
   if (!element) return 1
-  const elementScale = window.getComputedStyle(element).scale
-  if (elementScale !== 'none') {
-    return Number(elementScale)
+  const elementScale = Number(window.getComputedStyle(element).scale)
+  if (!isNaN(elementScale)) {
+    return elementScale
   } else {
     return getParentScale(element.parentElement)
   }

From 33408c0aa3a9037af40fd6c55a476e15a395e455 Mon Sep 17 00:00:00 2001
From: isaacmaamouche <maamouche.isaac@gmail.com>
Date: Tue, 22 Aug 2023 10:04:15 +0200
Subject: [PATCH 4/4] fix: check if window is defined for ssr

---
 packages/Tabs/src/utils.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/Tabs/src/utils.ts b/packages/Tabs/src/utils.ts
index fef06be832..865b037668 100644
--- a/packages/Tabs/src/utils.ts
+++ b/packages/Tabs/src/utils.ts
@@ -1,6 +1,11 @@
+//Check if the element, or its parent, has a scale property
 export const getParentScale = (element: HTMLElement | null): number => {
-  if (!element) return 1
+  //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 {