From 638c592d2dc3bb77c8b9da36ea6c84afc5505df0 Mon Sep 17 00:00:00 2001
From: "Indoteknik ." <andrifebriyadiputra@gmail.com>
Date: Wed, 16 Jul 2025 09:23:59 +0700
Subject: (andri) fix layout popup bottom

---
 src/lib/home/components/PopupBannerPromotion.jsx | 28 +++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/lib/home/components/PopupBannerPromotion.jsx b/src/lib/home/components/PopupBannerPromotion.jsx
index 347617d6..6700030a 100644
--- a/src/lib/home/components/PopupBannerPromotion.jsx
+++ b/src/lib/home/components/PopupBannerPromotion.jsx
@@ -22,6 +22,28 @@ const PagePopupInformation = () => {
 
   const [isSnapping, setIsSnapping] = useState(false); // 🔥 Penanda kapan transisi diaktifkan
 
+  const [containerLeft, setContainerLeft] = useState(0);
+
+  const updateContainerLeft = () => {
+    const container = document.querySelector('.container');
+    if (container) {
+      const left = container.getBoundingClientRect().left;
+      setContainerLeft(left);
+    }
+  };
+
+  useEffect(() => {
+    updateContainerLeft();
+
+    window.addEventListener('resize', updateContainerLeft);
+    window.addEventListener('scroll', updateContainerLeft);
+
+    return () => {
+      window.removeEventListener('resize', updateContainerLeft);
+      window.removeEventListener('scroll', updateContainerLeft);
+    };
+  }, []);
+
   useEffect(() => {
     const getData = async () => {
       try {
@@ -158,7 +180,11 @@ const PagePopupInformation = () => {
   const banner = data[0];
 
   return (
-    <div className="fixed inset-0 z-[9999] pointer-events-none">
+    <div className="fixed top-[50px] left-[120px] z-[9999] pointer-events-none"
+        style={{
+        top: '50px',
+        left: `${containerLeft - 125}px`,
+      }}>
       <div
         ref={popupRef}
         className={`absolute pointer-events-auto ${isSnapping ? 'transition-transform duration-300 ease-out' : ''}`}
-- 
cgit v1.2.3