Center tooltip

Author: apata

assets/js/dashboard/components/graph-tooltip.tsx

@@ -6,8 +6,6 @@ export const GraphTooltipWrapper = ({
   y,
   maxX,
   minWidth,
-  bucketIndex,
-  totalBuckets,
   children,
   className,
   onClick,
@@ -17,55 +15,25 @@ export const GraphTooltipWrapper = ({
   y: number
   maxX: number
   minWidth: number
-  bucketIndex: number
-  totalBuckets: number
   children: ReactNode
   className?: string
   onClick?: () => void
   isTouchDevice?: boolean
 }) => {
   const ref = useRef<HTMLDivElement>(null)
   // distance from cursor to tooltip edge
-  const offsetFromCursor = 4
-  // flip the tooltip to left of cursor if it would overflow on the right
-  // and keep it flipped to the left for all subsequent buckets
-  // even if they'd fit on the right (prevents excessive flips)
-  const [firstFlippedToLeftOn, setFirstFlippedToLeftOn] = useState<
-    number | null
-  >(null)
+  const offsetFromCursor = 32
   const [measuredWidth, setMeasuredWidth] = useState(minWidth)
-  const position =
-    firstFlippedToLeftOn !== null && bucketIndex >= firstFlippedToLeftOn
-      ? 'leftOfCursor'
-      : 'rightOfCursor'
-  const rawLeft =
-    position === 'leftOfCursor'
-      ? x - offsetFromCursor - measuredWidth
-      : x + offsetFromCursor
-  // prevent tooltip from oveflowing on the left when flipped to left of cursor on smaller screens
+  // center tooltip above the cursor, clamped to prevent left/right overflow
+  const rawLeft = x - measuredWidth / 2
   const tooltipLeft = Math.max(0, Math.min(rawLeft, maxX - measuredWidth))
 
-  useLayoutEffect(() => {
-    setFirstFlippedToLeftOn(null)
-  }, [totalBuckets])
-
   useLayoutEffect(() => {
     if (!ref.current) {
       return
     }
-    const w = ref.current.offsetWidth
-    setMeasuredWidth(w)
-    const wouldOverflow = x + offsetFromCursor + w > maxX
-    setFirstFlippedToLeftOn((prev) => {
-      if (wouldOverflow) {
-        return prev === null ? bucketIndex : Math.min(prev, bucketIndex)
-      }
-      if (prev !== null && bucketIndex < prev) {
-        return null
-      }
-      return prev
-    })
-  }, [x, maxX, bucketIndex])
+    setMeasuredWidth(ref.current.offsetWidth)
+  }, [children, className, minWidth])
 
   return (
     <Transition

assets/js/dashboard/stats/graph/main-graph.tsx

@@ -319,8 +319,6 @@ const MainGraphTooltip = ({
       y={y}
       minWidth={200}
       maxX={maxX}
-      bucketIndex={bucketIndex}
-      totalBuckets={totalBuckets}
       isTouchDevice={isTouchDevice}
       className={
         'absolute select-none pointer-events-none bg-gray-800 dark:bg-gray-950 py-3 px-4 rounded-md z-[100] shadow shadow-gray-200 dark:shadow-gray-850'