fix: Added collapse arrow styling, stage chevrons, filter right-alignme…

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

GSD-Task: S02/T01
This commit is contained in:
jlightner 2026-04-03 05:38:10 +00:00
parent 9e31e2b744
commit ab11a00765
2 changed files with 49 additions and 7 deletions

View file

@ -3704,6 +3704,10 @@ a.app-footer__repo:hover {
/* ── Creator Filter ───────────────────────────────────────────────────────── */ /* ── Creator Filter ───────────────────────────────────────────────────────── */
.creator-filter {
margin-left: auto;
}
.creator-filter__select { .creator-filter__select {
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
border-radius: 6px; border-radius: 6px;
@ -4130,18 +4134,17 @@ a.app-footer__repo:hover {
50% { opacity: 0.4; } 50% { opacity: 0.4; }
} }
/* Connector line between dots */ /* Connector chevron between dots */
.stage-timeline__step + .stage-timeline__step::before { .stage-timeline__step + .stage-timeline__step::before {
content: ""; content: "";
display: block; display: block;
width: 8px; font-size: 0.9rem;
height: 1px; color: var(--color-text-muted);
background: var(--color-border);
margin-right: 2px; margin-right: 2px;
} }
.stage-timeline__step--done + .stage-timeline__step::before { .stage-timeline__step--done + .stage-timeline__step::before {
background: #00c853; color: #00c853;
} }
.stage-timeline__elapsed { .stage-timeline__elapsed {
font-size: 0.7rem; font-size: 0.7rem;
@ -4190,6 +4193,18 @@ a.app-footer__repo:hover {
font-weight: 600; font-weight: 600;
} }
.recent-activity__arrow {
flex-shrink: 0;
width: 1rem;
text-align: center;
color: var(--color-text-muted);
transition: color 200ms;
}
.recent-activity__toggle:hover .recent-activity__arrow {
color: var(--color-text);
}
.recent-activity__list { .recent-activity__list {
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
@ -5656,3 +5671,30 @@ a.app-footer__about:hover,
min-width: unset; min-width: unset;
} }
} }
/* Responsive: pipeline admin cards on narrow viewports */
@media (max-width: 768px) {
.pipeline-video__header {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.pipeline-video__header > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.run-card__header {
flex-wrap: wrap;
}
.admin-pipeline__filters {
flex-direction: column;
align-items: stretch;
}
.creator-filter {
margin-left: 0;
}
}

View file

@ -1423,7 +1423,7 @@ export default function AdminPipeline() {
activeFilter={activeFilter} activeFilter={activeFilter}
onFilterChange={setActiveFilter} onFilterChange={setActiveFilter}
/> />
{creators.length > 1 && ( {creators.length >= 1 && (
<div className="creator-filter"> <div className="creator-filter">
<select <select
className="creator-filter__select" className="creator-filter__select"