---
estimated_steps: 6
estimated_files: 2
skills_used: []
---

# T01: Apply five CSS/UI fixes to pipeline admin page

Five independent CSS/markup fixes on the pipeline admin page. All changes are in `frontend/src/App.css` and `frontend/src/pages/AdminPipeline.tsx`.

**Fix 1 — Collapse arrow styling:** The `.recent-activity__arrow` class exists in JSX (line 906) but has no CSS rule. Add a rule with `transition: transform 200ms` and rotate the arrow when collapsed. The `run-card__arrow` (line 4344 in App.css) already has basic styling — use the same pattern for recent-activity.

**Fix 2 — Mobile card layout:** The `.pipeline-video__header` uses a 4-column CSS grid (`auto 1fr auto auto`). Add a `@media (max-width: 768px)` block that switches to a simpler layout: stack info/meta vertically, wrap actions. Also handle `.run-card__header` (flex layout) wrapping. Append to the existing mobile media query block or add a new pipeline-specific one near the pipeline CSS section.

**Fix 3 — Chevrons between stages:** Replace the `::before` pseudo-element on `.stage-timeline__step + .stage-timeline__step::before` (line 4134 in App.css). Currently draws an 8px×1px line. Change to `content: '›'` with appropriate font-size and color, remove the width/height/background line drawing.

**Fix 4 — Filter bar right-alignment:** Add `margin-left: auto` to `.creator-filter` in App.css (after line ~3707). This pushes the creator dropdown and search input (which follows in DOM order) to the right side of the flex container `.admin-pipeline__filters`.

**Fix 5 — Creator dropdown visibility:** In `AdminPipeline.tsx` line 1426, change `creators.length > 1` to `creators.length >= 1`. This shows the dropdown even when only one creator exists, so the user can see which creator's videos are displayed.

## Inputs

- `frontend/src/App.css`
- `frontend/src/pages/AdminPipeline.tsx`

## Expected Output

- `frontend/src/App.css`
- `frontend/src/pages/AdminPipeline.tsx`

## Verification

cd frontend && npm run build
