Skip to content

Commit 948c359

Browse files
ytkimirtiytkimirti
committed
fix styling issue with portals
1 parent 367d7db commit 948c359

File tree

8 files changed

+62
-34
lines changed

8 files changed

+62
-34
lines changed

‎src/components/databrowser/index.tsx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,26 +22,28 @@ export const RedisBrowser = ({ token, url }: RedisCredentials) => {
2222
<TooltipProvider>
2323
<DatabrowserProvider redisCredentials={credentials}>
2424
<KeysProvider>
25-
<PanelGroup
26-
autoSaveId="persistence"
27-
direction="horizontal"
28-
// ups-db is the custom class used to prefix every style in the css bundle
29-
className="ups-db h-full w-full gap-0.5 text-sm antialiased"
30-
>
31-
<Panel defaultSize={30} minSize={30}>
32-
<Sidebar />
33-
</Panel>
34-
<PanelResizeHandle className="h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20">
35-
<IconDotsVertical
36-
size={16}
37-
stroke={1}
38-
className="pointer-events-none shrink-0 opacity-20"
39-
/>
40-
</PanelResizeHandle>
41-
<Panel minSize={40}>
42-
<DataDisplay />
43-
</Panel>
44-
</PanelGroup>
25+
{/* ups-db is the custom class used to prefix every style in the css bundle */}
26+
<div className="ups-db">
27+
<PanelGroup
28+
autoSaveId="persistence"
29+
direction="horizontal"
30+
className="h-full w-full gap-0.5 text-sm antialiased"
31+
>
32+
<Panel defaultSize={30} minSize={30}>
33+
<Sidebar />
34+
</Panel>
35+
<PanelResizeHandle className="h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20">
36+
<IconDotsVertical
37+
size={16}
38+
stroke={1}
39+
className="pointer-events-none shrink-0 opacity-20"
40+
/>
41+
</PanelResizeHandle>
42+
<Panel minSize={40}>
43+
<DataDisplay />
44+
</Panel>
45+
</PanelGroup>
46+
</div>
4547
<Toaster />
4648
</KeysProvider>
4749
</DatabrowserProvider>

‎src/components/ui/alert-dialog.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react"
22
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
33

4+
import { portalRoot } from "@/lib/portal-root"
45
import { cn } from "@/lib/utils"
56
import { buttonVariants } from "@/components/ui/button"
67

@@ -9,7 +10,7 @@ const AlertDialog = AlertDialogPrimitive.Root
910
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
1011

1112
const AlertDialogPortal = ({ ...props }: AlertDialogPrimitive.AlertDialogPortalProps) => (
12-
<AlertDialogPrimitive.Portal {...props} />
13+
<AlertDialogPrimitive.Portal container={portalRoot} {...props} />
1314
)
1415
AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
1516

@@ -19,7 +20,7 @@ const AlertDialogOverlay = React.forwardRef<
1920
>(({ className, ...props }, ref) => (
2021
<AlertDialogPrimitive.Overlay
2122
className={cn(
22-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-white/80 backdrop-blur-sm dark:bg-zinc-950/80",
23+
"fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-zinc-950/80",
2324
className
2425
)}
2526
{...props}
@@ -37,8 +38,8 @@ const AlertDialogContent = React.forwardRef<
3738
<AlertDialogPrimitive.Content
3839
ref={ref}
3940
className={cn(
40-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 antialiased" +
41-
" data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg md:w-full dark:border-zinc-800 dark:bg-zinc-950",
41+
"antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0" +
42+
" fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
4243
className
4344
)}
4445
{...props}

‎src/components/ui/context-menu.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from "react"
22
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
33
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
44

5+
import { portalRoot } from "@/lib/portal-root"
56
import { cn } from "@/lib/utils"
67

78
const ContextMenu = ContextMenuPrimitive.Root
@@ -44,7 +45,7 @@ const ContextMenuSubContent = React.forwardRef<
4445
<ContextMenuPrimitive.SubContent
4546
ref={ref}
4647
className={cn(
47-
"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 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
48+
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg 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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4849
className
4950
)}
5051
{...props}
@@ -56,11 +57,11 @@ const ContextMenuContent = React.forwardRef<
5657
React.ElementRef<typeof ContextMenuPrimitive.Content>,
5758
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
5859
>(({ className, ...props }, ref) => (
59-
<ContextMenuPrimitive.Portal>
60+
<ContextMenuPrimitive.Portal container={portalRoot}>
6061
<ContextMenuPrimitive.Content
6162
ref={ref}
6263
className={cn(
63-
"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 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
64+
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md 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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
6465
className
6566
)}
6667
{...props}

‎src/components/ui/dialog.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import * as React from "react"
22
import * as DialogPrimitive from "@radix-ui/react-dialog"
33

4+
import { portalRoot } from "@/lib/portal-root"
45
import { cn } from "@/lib/utils"
56

67
const Dialog = DialogPrimitive.Root
78

89
const DialogTrigger = DialogPrimitive.Trigger
910

1011
const DialogPortal = (props: DialogPrimitive.DialogPortalProps) => (
11-
<DialogPrimitive.Portal {...props} />
12+
<DialogPrimitive.Portal container={portalRoot} {...props} />
1213
)
1314
DialogPortal.displayName = DialogPrimitive.Portal.displayName
1415

‎src/components/ui/dropdown-menu.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from "react"
22
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
33
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
44

5+
import { portalRoot } from "@/lib/portal-root"
56
import { cn } from "@/lib/utils"
67

78
const DropdownMenu = DropdownMenuPrimitive.Root
@@ -44,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
4445
<DropdownMenuPrimitive.SubContent
4546
ref={ref}
4647
className={cn(
47-
"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 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
48+
"ups-db z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg 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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4849
className
4950
)}
5051
{...props}
@@ -56,12 +57,12 @@ const DropdownMenuContent = React.forwardRef<
5657
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
5758
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
5859
>(({ className, sideOffset = 4, ...props }, ref) => (
59-
<DropdownMenuPrimitive.Portal>
60+
<DropdownMenuPrimitive.Portal container={portalRoot}>
6061
<DropdownMenuPrimitive.Content
6162
ref={ref}
6263
sideOffset={sideOffset}
6364
className={cn(
64-
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
65+
"ups-db z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
6566
"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",
6667
className
6768
)}

‎src/components/ui/popover.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react"
22
import * as PopoverPrimitive from "@radix-ui/react-popover"
33

4+
import { portalRoot } from "@/lib/portal-root"
45
import { cn } from "@/lib/utils"
56

67
const Popover = PopoverPrimitive.Root
@@ -11,7 +12,7 @@ const PopoverContent = React.forwardRef<
1112
React.ElementRef<typeof PopoverPrimitive.Content>,
1213
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
1314
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14-
<PopoverPrimitive.Portal>
15+
<PopoverPrimitive.Portal container={portalRoot}>
1516
<PopoverPrimitive.Content
1617
ref={ref}
1718
align={align}

‎src/components/ui/select.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react"
22
import * as SelectPrimitive from "@radix-ui/react-select"
33

4+
import { portalRoot } from "@/lib/portal-root"
45
import { cn } from "@/lib/utils"
56

67
const Select = SelectPrimitive.Root
@@ -49,11 +50,11 @@ const SelectContent = React.forwardRef<
4950
React.ElementRef<typeof SelectPrimitive.Content>,
5051
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
5152
>(({ className, children, position = "popper", ...props }, ref) => (
52-
<SelectPrimitive.Portal>
53+
<SelectPrimitive.Portal container={portalRoot}>
5354
<SelectPrimitive.Content
5455
ref={ref}
5556
className={cn(
56-
"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 relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
57+
"ups-db relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md 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 dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
5758
position === "popper" &&
5859
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
5960
className

‎src/lib/portal-root.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
let root
2+
3+
// This creates a div element and appends it to the body that will be used as the portal root
4+
// for all the components that need to be rendered outside the normal flow of the DOM.
5+
//
6+
// NOTE: When adding new shadcn components, always add container={portalRoot} to the Portal component
7+
//
8+
// Example:
9+
// const DialogPortal = (props: DialogPrimitive.DialogPortalProps) => (
10+
// <DialogPrimitive.Portal container={portalRoot} {...props} />
11+
// )
12+
if (typeof document !== "undefined") {
13+
root = document.createElement("div")
14+
15+
root.classList.add("ups-db")
16+
17+
document.body.append(root)
18+
}
19+
20+
export const portalRoot = root as HTMLDivElement

0 commit comments

Comments
 (0)