Feature #11543
openi am working on ui related on overall pages and in e-commerce
Subtasks
Related issues
Updated by Karthik Palakonda 6 days ago
- Subject changed from i am working on ui related on overall pages to i am working on ui related on overall pages and in e-commerce
- Due date set to 10/15/2026
- Status changed from In Progress to Resolved
- % Done changed from 0 to 100
1. Lowest Price Guarantee Tooltip (Mobile UX & Interaction Fix)
- File: `src/features/products/pages/productdetailsui.tsx`
- Fixed tooltip triggering behavior on mobile touchscreens: disabled synthetic hover events (`mouseenter`/`mouseleave`) on screens `< 768px` and touch devices (`hover: none`, `pointer: coarse`).
- Tooltip now opens strictly on explicit tap/click on mobile, while retaining smooth hover on desktop.
- Increased tap targets and added `touch-manipulation` for the info `(i)` and `(X)` close buttons for better touch responsiveness.
2. Product Details Header & Variant Badge Overlap Resolution
- File: `src/features/products/pages/productdetailsui.tsx`
- Resolved visual collision where multi-line product titles caused the variant pill badge (e.g., `Midnight Black / L`) to collide directly with `"35 customers are viewing this product"`.
- Removed hardcoded negative margin (`-mt-2`) and implemented clean responsive vertical spacing (`pt-1.5 pb-0.5`, `gap-x-2 gap-y-1.5`) ensuring proper clearance regardless of title length.
3. Sticky Bottom Bar "Add to Cart" Layout & Collapse Fix
- File: `src/features/products/pages/productdetailsui.tsx`
- Fixed bug where clicking `"ADD TO SHOP CART"` on mobile caused the button to shrink down into a tiny square (`[🛒 ADDED]`) and shift inwards with large empty gaps.
- Restructured bottom bar container with `w-full flex-1 min-w-0`: the quantity stepper remains anchored to the left, and the button fills 100% of the available width consistently across all states (`ADD TO SHOP CART` ➔ `Processing...` ➔ `✓ Added to Cart!`).
4. Bundle Add-to-Cart Feedback & Guest Cart Concurrency
- Files: `src/features/products/components/PdpMerchSections.tsx`, `src/hooks/useCart.tsx`
- Added animated spinner and explicit success feedback (`✓ Bundle Added to Cart!`) to the Frequently Bought Together bundle action.
- Updated guest cart state synchronization in `useCart.tsx` to read latest storage state, preventing race conditions and item overwrites when batch-adding bundle items.
5. Weather Picks Card Header UI Redesign
- File: `src/features/dashboard/componets/WeatherPicks.tsx`
- Redesigned the section header layout to eliminate cluttered and disjointed mobile elements:
- Deduplication: Filtered out the advisory alert pill when it repeated the headline text verbatim.
- Main Header Row: Unified weather badge (themed styling for rain, sun, cold), headline, inline temperature badge (`27°C`), and cleanly formatted condition/location subtitle, with `"See all >"` anchored to the top-right.
- Action Sub-Bar: Aligned distinct forecast advisories on the left and the `✓ Alerts On` / `🔔 Get Alerts` toggle button neatly on the right.
---
Status: Completed & Tested (TypeScript build clean, 0 compilation errors)