Merge pull request #275 from briefercloud/fix-cron-tooltip

fix cron tooltip clipped
briefercloud · Dec 3, 2024 · 0f553f1 · 0f553f1
2 parents 517ae08 + 28d628c
commit 0f553f1
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/apps/web/src/components/Schedules/index.tsx b/apps/web/src/components/Schedules/index.tsx
@@ -19,7 +19,7 @@ import cronstrue from 'cronstrue'
 import { useSchedules } from '@/hooks/useSchedules'
 import AddScheduleForm from './AddScheduleForm'
 import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline'
-import { Tooltip } from '../Tooltips'
+import { PortalTooltip, Tooltip } from '../Tooltips'
 import ScrollBar from '../ScrollBar'
 
 interface Props {
@@ -139,17 +139,22 @@ const CronSchedule = ({ schedule }: { schedule: CronSchedule }) => {
 
   return (
     <div>
-      <div className="font-medium pb-2">
-        <span className="pr-2">Cron: </span>
+      <div className="font-medium pb-2 flex items-center gap-x-2">
+        <span className="">Cron: </span>
         <span className="rounded-sm px-2 py-1 font-mono bg-gray-100 border border-gray-200">
           {cron}
         </span>
-        <span className="ml-2 group relative">
-          <QuestionMarkCircleIcon className="w-4 h-4 inline-block text-gray-300" />
-
-          <div className="pointer-events-none absolute -top-2 left-1/2 -translate-y-full -translate-x-1/2 w-[124px] opacity-0 transition-opacity group-hover:opacity-100 bg-hunter-950 text-gray-400 text-xs p-2 rounded-md flex flex-col gap-y-1">
-            {tooltipText}
-          </div>
+        <span className="group relative">
+          <PortalTooltip
+            ignoreScrollableAncestor
+            content={
+              <div className="pointer-events-none w-[124px] bg-hunter-950 text-gray-400 text-xs p-2 rounded-md flex flex-col gap-y-1 -translate-x-1/2 translate-y-[2px]">
+                {tooltipText}
+              </div>
+            }
+          >
+            <QuestionMarkCircleIcon className="w-4 h-4 inline-block text-gray-300" />
+          </PortalTooltip>
         </span>
       </div>
       <div className="pt-0.5 flex flex-col text-gray-400 gap-y-0.5">

diff --git a/apps/web/src/components/Tooltips.tsx b/apps/web/src/components/Tooltips.tsx
@@ -63,11 +63,18 @@ interface PortalTooltipProps {
   className?: string
   children: React.ReactNode
   content: React.ReactNode
+  ignoreScrollableAncestor?: boolean
 }
 export function PortalTooltip(props: PortalTooltipProps) {
   const ref = useRef<HTMLDivElement>(null)
   const [active, setActive] = useState(false)
-  const { onOpen, dropdownPosition } = useDropdownPosition(ref, 'top')
+  const { onOpen, dropdownPosition } = useDropdownPosition(
+    ref,
+    'top',
+    0,
+    0,
+    props.ignoreScrollableAncestor
+  )
   useEffect(() => {
     if (active) {
       onOpen()

diff --git a/apps/web/src/hooks/dropdownPosition.ts b/apps/web/src/hooks/dropdownPosition.ts
@@ -4,7 +4,8 @@ function useDropdownPosition(
   buttonRef: React.RefObject<HTMLElement>,
   anchor: 'top' | 'bottom' = 'bottom',
   paddingX = 0,
-  paddingY = 0
+  paddingY = 0,
+  ignoreScrollableAncestor = false
 ) {
   const [dropdownPosition, setDropdownPosition] = useState({
     top: 0,
@@ -28,7 +29,7 @@ function useDropdownPosition(
         currentButtonRef.closest('.overflow-scroll') ??
         currentButtonRef.closest('.overflow-auto')
 
-      if (scrollableAncestor) {
+      if (!ignoreScrollableAncestor && scrollableAncestor) {
         const scrollableRect = scrollableAncestor.getBoundingClientRect()
 
         setDropdownPosition({