feat: Added ≤768px and ≤400px responsive breakpoints for admin pipeline…
- "frontend/src/App.css" GSD-Task: S02/T03
This commit is contained in:
jlightner
parent
60b281b9d8
commit
4221bae3eb
4 changed files with 204 additions and 1 deletions
|
|
@ -92,7 +92,7 @@ Audit creator-facing dashboard pages, auth pages (Login/Register), and related U
|
|||
- Estimate: 1h
|
||||
- Files: frontend/src/pages/ConsentDashboard.module.css, frontend/src/pages/CreatorSettings.module.css, frontend/src/pages/Login.module.css, frontend/src/pages/Register.module.css, frontend/src/pages/EmbedPlayer.module.css
|
||||
- Verify: cd frontend && npm run build
|
||||
- [ ] **T03: Audit and fix admin pages at 375px and 768px (R038 pipeline admin)** — ## Description
|
||||
- [x] **T03: Added ≤768px and ≤400px responsive breakpoints for admin pipeline filter-tabs scroll, sort-toggle scroll, stage-tabs horizontal scroll, and tighter card padding on narrow viewports** — ## Description
|
||||
|
||||
Audit admin pages at 375px and 768px viewports. The primary target is AdminPipeline.tsx (R038) which has known mobile issues: vertical text on job cards, stage direction chevrons not visible, status filter needing button group treatment. AdminReports, AdminTechniquePages, AdminUsers, and AdminAuditLog also need verification.
|
||||
|
||||
|
|
|
|||
32
.gsd/milestones/M025/slices/S02/tasks/T02-VERIFY.json
Normal file
32
.gsd/milestones/M025/slices/S02/tasks/T02-VERIFY.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"schemaVersion": 1,
|
||||
"taskId": "T02",
|
||||
"unitId": "M025/S02/T02",
|
||||
"timestamp": 1775307335060,
|
||||
"passed": false,
|
||||
"discoverySource": "task-plan",
|
||||
"checks": [
|
||||
{
|
||||
"command": "cd frontend",
|
||||
"exitCode": 0,
|
||||
"durationMs": 8,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "npm run build",
|
||||
"exitCode": 254,
|
||||
"durationMs": 82,
|
||||
"verdict": "fail"
|
||||
}
|
||||
],
|
||||
"retryAttempt": 1,
|
||||
"maxRetries": 2,
|
||||
"runtimeErrors": [
|
||||
{
|
||||
"source": "bg-shell",
|
||||
"severity": "error",
|
||||
"message": "[vite-dev] recent errors: 12:49:03 PM [vite] http proxy error: /api/v1/techniques?limit=1&sort=random; Error: connect ECONNREFUSED 127.0.0.1:8001; 12:49:03 PM [vite] http proxy error: /api/v1/techniques?limit=6&sort=recent",
|
||||
"blocking": false
|
||||
}
|
||||
]
|
||||
}
|
||||
76
.gsd/milestones/M025/slices/S02/tasks/T03-SUMMARY.md
Normal file
76
.gsd/milestones/M025/slices/S02/tasks/T03-SUMMARY.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
id: T03
|
||||
parent: S02
|
||||
milestone: M025
|
||||
provides: []
|
||||
requires: []
|
||||
affects: []
|
||||
key_files: ["frontend/src/App.css"]
|
||||
key_decisions: ["Horizontal scroll with hidden scrollbar for filter-tabs and sort-toggle button groups on mobile, matching native iOS/Android touch-scroll patterns"]
|
||||
patterns_established: []
|
||||
drill_down_paths: []
|
||||
observability_surfaces: []
|
||||
duration: ""
|
||||
verification_result: "Browser screenshots at 375px and 768px for all admin pages confirmed no horizontal overflow. scrollWidth > clientWidth returned false on all pages. npm run build exited 0."
|
||||
completed_at: 2026-04-04T13:04:38.397Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T03: Added ≤768px and ≤400px responsive breakpoints for admin pipeline filter-tabs scroll, sort-toggle scroll, stage-tabs horizontal scroll, and tighter card padding on narrow viewports
|
||||
|
||||
> Added ≤768px and ≤400px responsive breakpoints for admin pipeline filter-tabs scroll, sort-toggle scroll, stage-tabs horizontal scroll, and tighter card padding on narrow viewports
|
||||
|
||||
## What Happened
|
||||
---
|
||||
id: T03
|
||||
parent: S02
|
||||
milestone: M025
|
||||
key_files:
|
||||
- frontend/src/App.css
|
||||
key_decisions:
|
||||
- Horizontal scroll with hidden scrollbar for filter-tabs and sort-toggle button groups on mobile, matching native iOS/Android touch-scroll patterns
|
||||
duration: ""
|
||||
verification_result: passed
|
||||
completed_at: 2026-04-04T13:04:38.398Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T03: Added ≤768px and ≤400px responsive breakpoints for admin pipeline filter-tabs scroll, sort-toggle scroll, stage-tabs horizontal scroll, and tighter card padding on narrow viewports
|
||||
|
||||
**Added ≤768px and ≤400px responsive breakpoints for admin pipeline filter-tabs scroll, sort-toggle scroll, stage-tabs horizontal scroll, and tighter card padding on narrow viewports**
|
||||
|
||||
## What Happened
|
||||
|
||||
Audited all five admin pages at 375px and 768px viewports. Found and fixed three overflow issues: filter-tabs on pipeline page (397px overflowing 360px usable width), sort-toggle button group on reports page (369px), and stage-tabs bar in expanded video detail. Added horizontal scroll with hidden scrollbar for all three. Added ≤400px safety-net breakpoint for tighter pipeline card padding and smaller stat fonts. AdminUsers, AdminAuditLog, and AdminTechniquePages already had adequate responsive rules.
|
||||
|
||||
## Verification
|
||||
|
||||
Browser screenshots at 375px and 768px for all admin pages confirmed no horizontal overflow. scrollWidth > clientWidth returned false on all pages. npm run build exited 0.
|
||||
|
||||
## Verification Evidence
|
||||
|
||||
| # | Command | Exit Code | Verdict | Duration |
|
||||
|---|---------|-----------|---------|----------|
|
||||
| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 3190ms |
|
||||
| 2 | `scrollWidth overflow check (375px, all admin pages)` | 0 | ✅ pass | 0ms |
|
||||
| 3 | `scrollWidth overflow check (768px, all admin pages)` | 0 | ✅ pass | 0ms |
|
||||
|
||||
|
||||
## Deviations
|
||||
|
||||
Used injected mock DOM elements for AdminPipeline testing since the API backend is not available locally. The CSS rules were verified against the exact BEM class structure used in AdminPipeline.tsx.
|
||||
|
||||
## Known Issues
|
||||
|
||||
None.
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `frontend/src/App.css`
|
||||
|
||||
|
||||
## Deviations
|
||||
Used injected mock DOM elements for AdminPipeline testing since the API backend is not available locally. The CSS rules were verified against the exact BEM class structure used in AdminPipeline.tsx.
|
||||
|
||||
## Known Issues
|
||||
None.
|
||||
|
|
@ -6152,6 +6152,23 @@ a.app-footer__about:hover,
|
|||
.admin-page__search {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
/* Sort-toggle button group: allow scroll when it exceeds viewport */
|
||||
.admin-reports__filters .sort-toggle {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-width: 100%;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.admin-reports__filters .sort-toggle::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sort-toggle__btn {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive: pipeline admin cards on narrow viewports */
|
||||
|
|
@ -6179,6 +6196,84 @@ a.app-footer__about:hover,
|
|||
.creator-filter {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Filter tabs: horizontal scroll when they exceed viewport */
|
||||
.admin-pipeline__filters .filter-tabs {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.admin-pipeline__filters .filter-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Stage tabs in expanded video detail: horizontal scroll */
|
||||
.stage-tabs__bar {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.stage-tabs__bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stage-tabs__tab {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Run card header items: allow wrapping with min-width guard */
|
||||
.run-card__header > * {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Narrow mobile (≤ 400px) — pipeline admin safety-net */
|
||||
@media (max-width: 400px) {
|
||||
.admin-pipeline__header {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-pipeline__header-right {
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Tighter padding on pipeline video cards */
|
||||
.pipeline-video__header {
|
||||
padding: 0.5rem 0.625rem;
|
||||
}
|
||||
|
||||
/* Meta items: smaller font, tighter gap */
|
||||
.pipeline-video__meta {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.pipeline-video__stat,
|
||||
.pipeline-video__time {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* Filter tab text: slightly smaller */
|
||||
.filter-tab {
|
||||
padding: 0.4rem 0.625rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Actions: shrink button text */
|
||||
.pipeline-video__actions .btn--small {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
/* Stage tabs: smaller touch targets */
|
||||
.stage-tabs__tab {
|
||||
padding: 0.4rem 0.625rem 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Video Player ──────────────────────────────────────────────────────────── */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue