(andri) fix padding drag popup

1 files changed, 16 insertions, 7 deletions

diff --git a/src/lib/home/components/PopupBannerPromotion.jsx b/src/lib/home/components/PopupBannerPromotion.jsx
index 1392a246..538f35e6 100644
--- a/src/lib/home/components/PopupBannerPromotion.jsx
+++ b/src/lib/home/components/PopupBannerPromotion.jsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { X } from 'lucide-react';
 import { getAuth } from '~/libs/auth';
 import useDevice from '@/core/hooks/useDevice';
+import { createPortal } from 'react-dom';
 
 const PagePopupInformation = () => {
   const router = useRouter();
@@ -23,6 +24,12 @@ const PagePopupInformation = () => {
   const isTouching = useRef(false);
   const [isSnapping, setIsSnapping] = useState(false);
   const [containerLeft, setContainerLeft] = useState(0);
+  
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
 
   useEffect(() => {
     if (isHomePage && !auth) {
@@ -106,17 +113,18 @@ const PagePopupInformation = () => {
     const popupWidth = popupRef.current?.offsetWidth || 85;
     const popupHeight = popupRef.current?.offsetHeight || 85;
     const maxX = window.innerWidth - popupWidth - 20;
-    
-    const bottomPadding = 80; // batas bawah minimal
+
+    const topPadding = isDesktop ? 0 : 130;
+    const bottomPadding = isDesktop ? 0 : 80;
     const maxY = window.innerHeight - popupHeight - bottomPadding;
-    
+
     const minX = 0;
 
     let newX = clientX - dragStartPos.current.x;
     let newY = clientY - dragStartPos.current.y;
 
     newX = Math.max(minX, Math.min(newX, maxX));
-    newY = Math.max(0, Math.min(newY, maxY));
+    newY = Math.max(topPadding, Math.min(newY, maxY));
 
     setPosition({ x: newX, y: newY });
   };
@@ -233,11 +241,12 @@ const PagePopupInformation = () => {
     </div>
   );
 
-  if (isDesktop) {
-    return (
+  if (isDesktop && isClient) {
+    return createPortal(
       <div className="fixed z-[9999] pointer-events-none top-0 left-0 w-screen h-screen">
         {popupContent}
-      </div>
+      </div>,
+      document.body
     );
   }