diff --git a/apps/web/src/components/Schedules/index.tsx b/apps/web/src/components/Schedules/index.tsx index 49f12550..6ce36d87 100644 --- 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 (
-
- Cron: +
+ Cron: {cron} - - - -
- {tooltipText} -
+ + + {tooltipText} +
+ } + > + +
diff --git a/apps/web/src/components/Tooltips.tsx b/apps/web/src/components/Tooltips.tsx index d941bcf2..38479907 100644 --- 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(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 index 2100c7da..e1c4ff60 100644 --- a/apps/web/src/hooks/dropdownPosition.ts +++ b/apps/web/src/hooks/dropdownPosition.ts @@ -4,7 +4,8 @@ function useDropdownPosition( buttonRef: React.RefObject, 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({