From 124d0e8ff7433da7f115ff3070003c21ca6c4113 Mon Sep 17 00:00:00 2001
From: Chever John <cheverjonathan@gmail.com>
Date: Tue, 30 Jun 2026 03:02:04 +0800
Subject: [PATCH] fix: use Portal to render ShareModal at document.body

AnimatedRoute's will-change:transform creates a new containing block,
which makes fixed positioning relative to that element instead of the
viewport. When the page is scrolled, the modal appears off-center.
Using createPortal to render at document.body bypasses this issue and
ensures the modal always appears centered in the viewport.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/plans/ShareModal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/plans/ShareModal.tsx b/src/components/plans/ShareModal.tsx
index 7dbb2ac..3ed927d 100644
--- a/src/components/plans/ShareModal.tsx
+++ b/src/components/plans/ShareModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { motion } from 'framer-motion';
 import { Share2, Copy, Check, X, AlertTriangle, Building2, Eye, EyeOff, Link2, Send } from 'lucide-react';
 import { useResponsive } from '../../hooks/useResponsive';
@@ -244,7 +245,7 @@ export function ShareModal({
   const link = generateShareLink();
   const factoryLabel = factoryType === 'textile' ? '织布厂' : '水洗厂';
 
-  return (
+  return createPortal(
     <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-3 sm:p-4">
       <motion.div
         initial={{ opacity: 0, scale: 0.95 }}
@@ -529,6 +530,7 @@ export function ShareModal({
           </>
         )}
       </motion.div>
-    </div>
+    </div>,
+    document.body
   );
 }