# Partner Earnings Section - Fixes Applied 2026-02-16 (Archived)

**Archived:** 2026-02-16 – Superseded by complete rebuild with single-DOM pattern.

**Last Updated:** 2026-02-16

## Note

This document described incremental fixes to the original dual-DOM (desktop/mobile split) implementation. Those fixes proved insufficient. The section was rebuilt from scratch with a **single card DOM** pattern. See:

- `docs/systems/landing-page-features/SCROLL-LOCKED-ANIMATIONS.md` – Updated implementation pattern
- Plan: `.cursor/plans/partner_earnings_rebuild_ac8364ed.plan.md`

---

## Issues Fixed (Original Attempt)

### 1. Card Too Wide ✅

**Problem:** The earnings card was expanding beyond the intended 480px width, especially when in locked (fixed) state.

**Root Cause:**
- Conflicting `w-full` Tailwind class causing full-width expansion
- No explicit width constraints in locked state CSS
- Wrapper lacked max-width constraint

**Solution:**
- Added explicit `width: 90vw` and `max-width: 480px` to locked state
- Set wrapper to `max-width: 480px` with `margin: 0 auto`
- Removed `w-full` from card HTML
- Card now properly constrained at all breakpoints

### 2. Card Appearing Multiple Times ✅

**Problem:** Both desktop and mobile versions of the card were visible simultaneously, creating duplicate/overlapping displays.

**Root Cause:**
- Tailwind `hidden sm:flex` classes were conflicting with CSS media queries
- Inconsistent display logic between HTML classes and CSS
- Both versions rendering in DOM without proper mutual exclusion

**Solution:**
- Replaced Tailwind visibility classes with pure CSS media queries
- Desktop wrapper: `display: none !important` on `@media (max-width: 639px)`
- Mobile version: `display: none !important` on `@media (min-width: 640px)`
- Ensures only ONE version visible at any viewport size
- Mutual exclusion guaranteed by `!important` and matching breakpoints

### 3. Overlapping/Overriding ✅

**Problem:** Elements overlapping or overriding each other incorrectly.

**Root Cause:**
- `overflow-hidden` on parent div (line 223 in static_partner.php) was clipping the fixed-position card during lock
- Missing `overflow: visible` on earnings section for fixed positioning context

**Solution:**
- Removed `overflow-hidden` from wrapper div after earnings section
- Added `body.partner-page .partner-earnings-section { overflow: visible !important; }`
- Ensures fixed card isn't clipped when it breaks out of normal flow

### 4. Outdated CSS Removed ✅

**Removed:**
- `html.partner-page-root, body.partner-page { overflow: visible !important; }` - Too broad, replaced with section-specific rule
- Redundant transition properties
- Conflicting Tailwind utility classes from HTML

**Kept (still needed):**
- Chart animation styles (`.partner-earnings-path`, `.partner-earnings-area`, etc.) - Used by both desktop (JS-driven) and mobile (class-based)
- `prefers-reduced-motion` media query - Accessibility requirement

## Files Modified (Original Attempt)

### `v2/includes/partner-first-year-earnings-animation.php`
- Removed `hidden sm:flex` from desktop wrapper (now CSS-controlled)
- Removed `w-full max-w-[480px]` from card (now in CSS)
- Simplified to: `min-h-[600px] flex justify-center items-center`

### `v2/css/partner-page.css`
- Added `body.partner-page .partner-earnings-section { overflow: visible !important; }`
- Wrapper: `max-width: 480px`, `margin: 0 auto`, `padding: 0 1rem`
- Card: `width: 100%`, `max-width: 480px`
- Locked state: `width: 90vw !important`, `max-width: 480px !important`
- Responsive: Desktop hidden <640px, mobile hidden ≥640px
- Removed outdated overflow rules

### `v2/pages/static_partner.php`
- Removed `overflow-hidden` from div wrapping content after earnings section
- Updated comment to reflect scroll-locked (not sticky) pattern