From 0723b43c541f462e24b68b2d3be5182730ceb9eb Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Mon, 14 Sep 2026 01:45:25 +0000
Subject: [PATCH] =?UTF-8?q?fix(ecommerce):=20corrige=20condici=C3=B3n=20pa?=
 =?UTF-8?q?ra=20ocultar=20el=20CTA=20fijo=20en=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug real encontrado armando la prueba automatizada que valida el
commit anterior (cd72962): condicionar el ocultamiento a que el borde
superior de "También te puede gustar" cruce el TOPE del viewport
(top <= 0) no es alcanzable en páginas sin suficiente contenido/footer
debajo -- el scroll máximo del documento nunca llega a ese punto, y el
bug original (barra pegada hasta el fondo) seguía reproduciéndose en
la práctica, aunque el código "parecía" correcto.

Se compara ahora contra la ALTURA del viewport (top < innerHeight): la
barra se oculta apenas la sección empieza a asomar desde abajo, y
sigue oculta el resto del scroll sin depender de cuánto contenido haya
más abajo.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
---
 .../components/product/mobile-add-to-cart.tsx | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/workloads/ecommerce/components/product/mobile-add-to-cart.tsx b/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
index e91ffaa..c4781aa 100644
--- a/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
+++ b/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
@@ -18,12 +18,21 @@ const SCROLL_THRESHOLD_PX = 80;
 //   ProductPurchase, visible tambien en mobile) no esta en pantalla --
 //   ya sea porque todavia no se llego a el, o porque se scrolleo mas
 //   alla.
-// - !pastRecommendations: una vez que se llega a "También te puede
-//   gustar" (#recommendations-section en app/product/[slug]/page.tsx)
-//   la barra se oculta y ya no vuelve a aparecer bajando mas -- pedido
-//   explicito del usuario (antes quedaba pegada hasta el footer, sin
-//   sentido una vez que el contenido principal del producto ya quedó
-//   atrás).
+// - !pastRecommendations: una vez que "También te puede gustar"
+//   (#recommendations-section en app/product/[slug]/page.tsx) empieza a
+//   entrar en pantalla, la barra se oculta y sigue oculta el resto del
+//   scroll (footer incluido) -- pedido explicito del usuario. OJO:
+//   condicionar esto a que el borde superior de la seccion cruce el
+//   TOPE del viewport (top <= 0) rompe en paginas cortas -- si no hay
+//   suficiente contenido/footer debajo, nunca se puede scrollear tan
+//   lejos y el bug original (barra pegada hasta el fondo) segunia
+//   reproduciendose. En cambio, se compara contra la ALTURA del
+//   viewport (top < innerHeight): se oculta apenas la seccion empieza a
+//   asomar desde abajo, se mantiene oculta al seguir scrolleando mas
+//   alla (top se vuelve cada vez mas negativo, sigue siendo <
+//   innerHeight), y solo reaparece si se vuelve a scrollear hacia
+//   arriba lo suficiente como para que la seccion salga de pantalla per
+//   completo otra vez.
 export function MobileAddToCart({ product }: { product: Product }) {
   const addItem = useCartStore((state) => state.addItem);
   const [buttonVisible, setButtonVisible] = useState(true);
@@ -47,7 +56,7 @@ export function MobileAddToCart({ product }: { product: Product }) {
     if (!target) return;
     const observer = new IntersectionObserver((entries) => {
       const entry = entries[0];
-      if (entry) setPastRecommendations(entry.boundingClientRect.top <= 0);
+      if (entry) setPastRecommendations(entry.boundingClientRect.top < window.innerHeight);
     }, { threshold: 0 });
     observer.observe(target);
     return () => observer.disconnect();