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

@@ -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,

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)
+ }
+}