Skip to content

Commit

Permalink
fix(client): Improve dialog mobile styles
Browse files Browse the repository at this point in the history
clementprdhomme committed Nov 20, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 543f3e4 commit 72dc55d
Showing 1 changed file with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions client/src/components/ui/dialog.tsx
Original file line number Diff line number Diff line change
@@ -39,13 +39,16 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-10 flex max-h-[calc(100vh_-_theme(spacing.10))] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 bg-rhino-blue-900 px-10 py-12 text-white duration-500 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-[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-10 flex max-h-[calc(100vh_-_2_*_68px-_theme(spacing.10))] w-full max-w-[calc(100vw_-_theme(spacing.10))] translate-x-[-50%] translate-y-[-50%] flex-col-reverse gap-4 bg-rhino-blue-900 px-5 py-5 text-white duration-500 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-[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%] sm:max-w-lg xl:max-h-[calc(100vh_-_theme(spacing.10))] xl:flex-col xl:px-10 xl:py-12",
className,
)}
{...props}
>
<div className="overflow-y-auto">{children}</div>
<DialogPrimitive.Close className="absolute right-0 top-5 translate-x-1/2" asChild>
<DialogPrimitive.Close
className="ml-auto shrink-0 xl:absolute xl:right-0 xl:top-5 xl:ml-0 xl:translate-x-1/2"
asChild
>
<Button type="button" variant="yellow" size="icon">
<XMarkIcon aria-hidden className="!size-5 xl:!size-6" />
<span className="sr-only">Close</span>

0 comments on commit 72dc55d

Please sign in to comment.