openstatus.dev
Openstatus
www.openstatus.dev
fix: missing portal (#729)
authored by
Maximilian Kaske
and committed by
GitHub
374e5f9f
3376fd1c
+37
-21
+16
-11
packages/ui/src/components/hover-card.tsx
+16
-11
packages/ui/src/components/hover-card.tsx
···
7
7
8
8
const HoverCard = HoverCardPrimitive.Root;
9
9
10
+
// REMINDER: fixes the Safari 17.4. bug where portal floats somewhere
11
+
const HoverCardPortal = HoverCardPrimitive.Portal;
12
+
10
13
const HoverCardTrigger = HoverCardPrimitive.Trigger;
11
14
12
15
const HoverCardContent = React.forwardRef<
13
16
React.ElementRef<typeof HoverCardPrimitive.Content>,
14
17
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
15
18
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16
-
<HoverCardPrimitive.Content
17
-
ref={ref}
18
-
align={align}
19
-
sideOffset={sideOffset}
20
-
className={cn(
21
-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
22
-
className,
23
-
)}
24
-
{...props}
25
-
/>
19
+
<HoverCardPortal>
20
+
<HoverCardPrimitive.Content
21
+
ref={ref}
22
+
align={align}
23
+
sideOffset={sideOffset}
24
+
className={cn(
25
+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
26
+
className,
27
+
)}
28
+
{...props}
29
+
/>
30
+
</HoverCardPortal>
26
31
));
27
32
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
28
33
29
-
export { HoverCard, HoverCardTrigger, HoverCardContent };
34
+
export { HoverCard, HoverCardPortal, HoverCardTrigger, HoverCardContent };
+21
-10
packages/ui/src/components/tooltip.tsx
+21
-10
packages/ui/src/components/tooltip.tsx
···
9
9
10
10
const Tooltip = TooltipPrimitive.Root;
11
11
12
+
// REMINDER: fixes the Safari 17.4. bug where portal floats somewhere
13
+
const TooltipPortal = TooltipPrimitive.Portal;
14
+
12
15
const TooltipTrigger = TooltipPrimitive.Trigger;
13
16
14
17
const TooltipContent = React.forwardRef<
15
18
React.ElementRef<typeof TooltipPrimitive.Content>,
16
19
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17
20
>(({ className, sideOffset = 4, ...props }, ref) => (
18
-
<TooltipPrimitive.Content
19
-
ref={ref}
20
-
sideOffset={sideOffset}
21
-
className={cn(
22
-
"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
23
-
className,
24
-
)}
25
-
{...props}
26
-
/>
21
+
<TooltipPortal>
22
+
<TooltipPrimitive.Content
23
+
ref={ref}
24
+
sideOffset={sideOffset}
25
+
className={cn(
26
+
"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
27
+
className,
28
+
)}
29
+
{...props}
30
+
/>
31
+
</TooltipPortal>
27
32
));
28
33
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
29
34
30
-
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
35
+
export {
36
+
Tooltip,
37
+
TooltipTrigger,
38
+
TooltipPortal,
39
+
TooltipContent,
40
+
TooltipProvider,
41
+
};