---
estimated_steps: 24
estimated_files: 1
skills_used: []
---

# T02: Mobile responsive polish for creator detail page at 375px

Add CSS media query fixes so the creator detail page renders cleanly at 375px (iPhone SE width). The hero already stacks vertically at 768px. This task targets the remaining narrow-screen issues: stats bar text wrapping, featured card padding, technique grid columns, social icons overflow, genre pills wrapping, and the new edit form from T01.

## Steps

1. Read `frontend/src/App.css` around the existing 768px and 640px breakpoints for creator styles (lines ~3260-3290). Understand what's already responsive.

2. Add a `@media (max-width: 480px)` block targeting creator page elements:
   - `.creator-detail__stats-bar`: reduce font-size, adjust gap, ensure wrapping
   - `.creator-detail__topic-pills`: ensure badges wrap without overflow
   - `.creator-featured`: reduce padding, ensure title doesn't overflow
   - `.creator-featured__title`: reduce font-size for narrow screens
   - `.creator-techniques__list`: single-column grid (`grid-template-columns: 1fr`)
   - `.creator-hero__socials`: wrap icons if many, reduce gap
   - `.creator-hero__genres`: ensure pills wrap
   - `.creator-edit-form` (from T01): full-width inputs, stacked layout
   - `.creator-edit-form__links` row: stack platform select above URL input

3. Check that the `.creator-techniques__header` (title + sort dropdown) doesn't overflow at 375px — may need flex-wrap or reduced gap.

4. Verify: `cd frontend && npm run build` passes (CSS is valid).

## Must-Haves

- [ ] No horizontal overflow at 375px viewport width on creator detail page
- [ ] Stats bar text readable and wrapped at narrow widths
- [ ] Featured technique card contained within viewport
- [ ] Technique grid single-column at 480px and below
- [ ] Edit form (from T01) usable at 375px — full-width inputs, readable labels

## Verification

- `cd frontend && npm run build` exits 0
- `grep -q '480px' frontend/src/App.css` — narrow breakpoint exists

## Inputs

- ``frontend/src/App.css` — current responsive breakpoints and creator CSS from S01/S02 and T01`
- ``frontend/src/pages/CreatorDetail.tsx` — class names used in the component (read-only reference)`

## Expected Output

- ``frontend/src/App.css` — 480px media query block with creator page mobile fixes`

## Verification

cd frontend && npm run build
