From 142d9918161aa455b49c324ea67f00d22c9b5e74 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 5 Oct 2026 06:17:08 +0700
Subject: [PATCH] x

---
 .../page-builder/BlockTranslationModal.tsx          | 13 ++++++++++---
 .../components/products/ProductTranslationModal.tsx | 13 ++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/admin/src/components/page-builder/BlockTranslationModal.tsx b/apps/admin/src/components/page-builder/BlockTranslationModal.tsx
index cbd60a4..bf1a676 100644
--- a/apps/admin/src/components/page-builder/BlockTranslationModal.tsx
+++ b/apps/admin/src/components/page-builder/BlockTranslationModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import {
   X,
   Copy,
@@ -357,6 +358,11 @@ export default function BlockTranslationModal({
       setActiveTab(initialTab);
       setParseError(null);
       setSuccessMsg(null);
+      const prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = prevOverflow;
+      };
     }
   }, [isOpen, initialTab]);
 
@@ -1407,8 +1413,8 @@ ${exportJsonString}
 
   if (!isOpen) return null;
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-night-950/80 backdrop-blur-md animate-fade-in">
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-night-950/80 backdrop-blur-md animate-fade-in">
       <div className="bg-night-900 border border-white/10 rounded-3xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden text-slate-200 animate-pop-in">
         {/* Header */}
         <div className="px-6 py-5 border-b border-white/5 flex items-center justify-between bg-gradient-to-r from-white/[0.04] to-transparent shrink-0">
@@ -2035,6 +2041,7 @@ ${exportJsonString}
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }
diff --git a/apps/admin/src/components/products/ProductTranslationModal.tsx b/apps/admin/src/components/products/ProductTranslationModal.tsx
index 2b2ca98..974ab19 100644
--- a/apps/admin/src/components/products/ProductTranslationModal.tsx
+++ b/apps/admin/src/components/products/ProductTranslationModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import {
   X,
   Copy,
@@ -142,6 +143,11 @@ export default function ProductTranslationModal({
       setActiveTab(initialTab);
       setParseError(null);
       setSuccessMsg(null);
+      const prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = prevOverflow;
+      };
     }
   }, [isOpen, initialTab]);
 
@@ -357,8 +363,8 @@ ${exportJsonString}
 
   if (!isOpen) return null;
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-night-950/80 backdrop-blur-md animate-fade-in">
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-night-950/80 backdrop-blur-md animate-fade-in">
       <div className="bg-night-900 border border-white/10 rounded-3xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden text-slate-200 animate-pop-in">
         {/* Header */}
         <div className="px-6 py-5 border-b border-white/5 flex items-center justify-between bg-gradient-to-r from-white/[0.04] to-transparent shrink-0">
@@ -689,6 +695,7 @@ ${exportJsonString}
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }