# S02 Research — Pipeline Admin UI Fixes

## Summary

Five CSS/UI fixes on the existing pipeline admin page. All changes are confined to `frontend/src/pages/AdminPipeline.tsx` and `frontend/src/App.css`. No backend changes needed. Straightforward application of existing patterns.

## Recommendation

Single task. All five fixes are small, independent CSS/markup changes in two files. No new dependencies, no architecture decisions.

## Implementation Landscape

### Files to Modify

| File | What changes |
|------|-------------|
| `frontend/src/App.css` | All five CSS fixes below |
| `frontend/src/pages/AdminPipeline.tsx` | Chevron markup (if needed beyond CSS), possibly minor JSX tweaks |

### Fix 1: Collapse Toggle

**Current state:** `RecentActivityFeed` (line ~876) has `collapsed/setCollapsed` state and renders `▸`/`▾` arrow text. The toggle works functionally — content shows/hides via conditional rendering (`{!collapsed && ...}`). No animation on collapse.

**What to fix:** The collapse works but lacks visual polish. The arrow character has no dedicated CSS (`.recent-activity__arrow` class exists in JSX but has no CSS rule). Add a transition or rotation for the arrow indicator. Consider applying the same pattern to `ChunkingInspector` toggle (line ~976) which uses the same `▸`/`▾` pattern.

### Fix 2: Mobile Cards Truncate

**Current state:** `.pipeline-video__header` uses CSS grid with `grid-template-columns: auto 1fr auto auto` (4 columns: checkbox, info, meta, actions). No `@media` breakpoint exists for pipeline video cards. On mobile, the 4-column grid will overflow or crush content.

**What to fix:** Add a `@media (max-width: 768px)` breakpoint that:
- Stacks the grid to a single-column or 2-column layout
- Hides or wraps `.pipeline-video__meta` items
- Makes `.pipeline-video__actions` buttons full-width or wraps them
- `.pipeline-video__filename` already has `text-overflow: ellipsis` — good
- `.run-card__header` (flex, many items) also needs wrapping at mobile widths

### Fix 3: Chevrons Between Stages

**Current state:** `.stage-timeline__step + .stage-timeline__step::before` draws a 1px line (8px wide) between stage dots. This is a thin connector line, not a chevron.

**What to fix:** Replace the `::before` pseudo-element content from an empty string + background line to a chevron character (`›` or `▸`) or a small CSS arrow shape. The connector is between each `.stage-timeline__step`. Keep the color logic: done steps get green (`#00c853`), others get `var(--color-border)`.

### Fix 4: Filter Button Group Right-Aligned

**Current state:** `.admin-pipeline__filters` is `display: flex; gap: 1rem; flex-wrap: wrap;` with no `justify-content`. Children are: `StatusFilter` (filter-tabs), creator `<select>`, and search input. They all flow left.

**What to fix:** The filter tabs should stay left-aligned. The creator dropdown and search input should be pushed right. Options:
- Add `margin-left: auto` on `.creator-filter` to push it and the search right
- Or use `justify-content: space-between` with a wrapper

The simpler approach: `.creator-filter { margin-left: auto; }` pushes it and the search input (which follows it in DOM order) to the right side.

### Fix 5: Creator Dropdown Populates

**Current state:** `useEffect` at line ~1263 calls `fetchCreators({ limit: 200 })` and maps the response `items` to `{ name, slug }`. The `<select>` renders `{creators.map(c => <option>)}`. The `fetchCreators` API function calls `GET /api/v1/creators?limit=200`.

**Potential issue:** The `fetchCreators` call uses the public creators endpoint which returns `CreatorBrowseItem[]`. The mapping `c.name` and `c.slug` matches that interface. If the API is returning an error (e.g., 500), the `.catch(() => {})` silently swallows it, leaving the dropdown empty. The conditional `{creators.length > 1 && ...}` means if only 1 creator exists, the dropdown is hidden entirely.

**What to fix:** The `creators.length > 1` guard is correct (no point filtering if there's only one). The issue is likely that on the live deployment, the endpoint returns creators fine but the dropdown may need a loading state or the `> 1` threshold may need to be `> 0` (show the dropdown even with 1 creator so it's clear which creator's videos are shown). Verify against the live API. If the API works, the fix is changing `> 1` to `>= 1` or `> 0`.

### Verification

```bash
cd frontend && npm run build
```

Build must pass with zero TypeScript errors. Visual verification on `http://ub01:8096/admin/pipeline`:
1. Recent Activity section collapses/expands with visual indicator
2. On narrow viewport (<768px), video cards don't overflow horizontally
3. Stage timeline shows chevron characters between dots
4. Creator dropdown and search are right-aligned within the filter bar
5. Creator dropdown shows all creators from the API

### Constraints

- All CSS custom properties are defined in `:root` block in App.css — use existing `var(--*)` tokens
- The stage timeline is rendered inside each video card header — keep it compact
- Mobile breakpoint pattern: use `@media (max-width: 768px)` consistent with rest of codebase
