Bug: The sticky mobile CTA bar covers critical input fields when the …

[pradeep0153]

Closes #384.

Description

This PR resolves a severe mobile UX blocker on the Product Display Page (PDP) where the sticky "Add to Cart" bar would physically obscure text input fields (e.g., custom dimensions or gift notes) whenever the iOS/Android virtual keyboard was activated.

Changes Made

• Viewport State Audit: Investigated the CSS architecture governing the <StickyMobileCTA /> component. Discovered that anchoring the component to bottom: 0 caused it to be forcefully pushed upward when the virtual keyboard contracted the visual viewport, creating a collision with the active input field.
• Dynamic Viewport Detection: Engineered a robust, native viewport detection mechanism. Integrated the modern VisualViewport API (and fallback focus event listeners) to accurately detect the exact millisecond the virtual keyboard is deployed.
• Conditional Rendering Logic: Refactored the <StickyMobileCTA /> component to become state-aware of the keyboard's presence.
• Smooth Animation Hiding: When any text input field gains focus (onFocus) and the keyboard slides up, the component dynamically toggles a CSS state, smoothly animating the sticky CTA bar out of the viewport (via transform: translateY(100%) or opacity: 0). When the input loses focus (onBlur), the bar gracefully animates back into its anchored position.

Impact

• Accessibility & Mobile Conversion: Attempting to type a custom gift note while a massive "Add to Cart" bar is physically blocking your view of the text you are typing is an incredibly frustrating, broken experience that directly causes cart abandonment on mobile devices. By intelligently hiding the sticky CTA precisely when the user needs unobstructed screen real estate, we restore a flawless, accessible data-entry flow, significantly improving the mobile purchasing experience.

[vercel]

@pradeep0153 is attempting to deploy a commit to the janavipandole's projects Team on Vercel.

A member of the Team first needs to authorize it.