fix(desktop): Fixed issue where preferences header & tooltips are overlapped by custom titlebar

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react'
 import { Tooltip, TooltipAnchor, TooltipStoreProps, useTooltipStore } from '@ariakit/react'
 import { Slot } from '@radix-ui/react-slot'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles'
 
 const StyledTooltip = ({
   children,
@@ -16,7 +17,31 @@ const StyledTooltip = ({
 } & Partial<TooltipStoreProps>) => {
   const tooltip = useTooltipStore({
     timeout: 350,
-    gutter: 6,
+    renderCallback(props) {
+      const { popoverElement, anchorElement } = props
+
+      const documentElement = document.querySelector('.main-ui-view')
+
+      if (!popoverElement || !anchorElement || !documentElement) {
+        return
+      }
+
+      const anchorRect = anchorElement.getBoundingClientRect()
+      const popoverRect = popoverElement.getBoundingClientRect()
+      const documentRect = documentElement.getBoundingClientRect()
+
+      const styles = getPositionedPopoverStyles({
+        align: 'center',
+        side: 'bottom',
+        anchorRect,
+        popoverRect,
+        documentRect,
+        disableMobileFullscreenTakeover: true,
+        offset: 6,
+      })
+
+      Object.assign(popoverElement.style, styles)
+    },
     ...props,
   })
   const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)