GKaszewski/movies-diary
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: portal wrapup share card to escape transform stacking context
All checks were successful
CI / Check / Test (push) Successful in 1h5m29s
Details

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-07-27 14:07:36 +02:00
parent 813778dc7e
commit 22b1dd3f56
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
spa/src/components/wrapup-share-card.tsx
View File

@@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from "react" import { useEffect, useRef, useState } from "react"
import { createPortal } from "react-dom"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { Download, Share2, X } from "lucide-react" import { Download, Share2, X } from "lucide-react"
import html2canvas from "html2canvas-pro" import html2canvas from "html2canvas-pro"
@@ -59,7 +60,7 @@ export function WrapUpShareCard({ report, onClose }: Props) {
} }
} }
return ( return createPortal(
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black/80 p-4"> <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black/80 p-4">
<div className="mb-4 flex w-full max-w-sm items-center justify-between"> <div className="mb-4 flex w-full max-w-sm items-center justify-between">
<Button variant="ghost" size="icon" onClick={onClose} className="text-white"> <Button variant="ghost" size="icon" onClick={onClose} className="text-white">
@@ -138,7 +139,8 @@ export function WrapUpShareCard({ report, onClose }: Props) {
</div> </div>
</div> </div>
</div> </div>
</div> </div>,
document.body,
) )
} }