docs: handle step tooltip bug in safari (medusajs#10954)

www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx

@@ -7,6 +7,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react"
 import { WorkflowStepUi } from "types"
 import { InlineCode, MarkdownContent, Tooltip } from "../../.."
 import { Bolt, InformationCircle } from "@medusajs/icons"
+import { getBrowser } from "../../../../utils"
 
 export type WorkflowDiagramNodeProps = {
   step: WorkflowStepUi
@@ -34,12 +35,22 @@ export const WorkflowDiagramStepNode = ({ step }: WorkflowDiagramNodeProps) => {
       return
     }
 
+    const firstChild = nodeParent.firstChild as HTMLElement
+
     const nodeBoundingRect = nodeParent.getBoundingClientRect()
     const diagramBoundingRect = diagramParent.getBoundingClientRect()
+    const browser = getBrowser()
 
-    setOffset(
-      Math.max(diagramBoundingRect.width - nodeBoundingRect.width + 10, 10)
-    )
+    if (browser === "Safari") {
+      // React Tooltip has a bug in Safari where the offset is not calculated correctly
+      // when place is set.
+      const firstChildBoundingRect = firstChild.getBoundingClientRect()
+      setOffset(diagramBoundingRect.width - firstChildBoundingRect.width + 20)
+    } else {
+      setOffset(
+        Math.max(diagramBoundingRect.width - nodeBoundingRect.width + 10, 10)
+      )
+    }
   }, [ref.current])
 
   return (

www/packages/docs-ui/src/utils/index.ts

@@ -5,7 +5,7 @@ export * from "./decode-str"
 export * from "./dom-utils"
 export * from "./get-link-with-base-path"
 export * from "./get-navbar-items"
-export * from "./get-os-shortcut"
+export * from "./os-browser-utils"
 export * from "./get-scrolled-top"
 export * from "./is-elm-window"
 export * from "./is-in-view"

www/packages/docs-ui/src/utils/os-browser-utils.ts

@@ -0,0 +1,39 @@
+export function getBrowser():
+  | "Chrome"
+  | "Safari"
+  | "Firefox"
+  | "Internet Explorer"
+  | "Edge"
+  | "unknown" {
+  if (typeof navigator === "undefined") {
+    return "unknown"
+  }
+
+  const userAgent = navigator.userAgent.toLowerCase()
+
+  if (userAgent.indexOf("chrome") > -1) {
+    return "Chrome"
+  } else if (userAgent.indexOf("safari") > -1) {
+    return "Safari"
+  } else if (userAgent.indexOf("firefox") > -1) {
+    return "Firefox"
+  } else if (
+    userAgent.indexOf("msie") > -1 ||
+    userAgent.indexOf("trident") > -1
+  ) {
+    return "Internet Explorer"
+  } else if (userAgent.indexOf("edge") > -1) {
+    return "Edge"
+  } else {
+    return "unknown"
+  }
+}
+
+export function getOsShortcut() {
+  const isMacOs =
+    typeof navigator !== "undefined"
+      ? navigator.userAgent.toLowerCase().indexOf("mac") !== 0
+      : true
+
+  return isMacOs ? "⌘" : "Ctrl"
+}