(andri) fix layout popup bottom

1 files changed, 27 insertions, 1 deletions

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' : ''}`}