From 60b281b9d8ea6d60ae16f726c17775760f24819a Mon Sep 17 00:00:00 2001 From: jlightner Date: Sat, 4 Apr 2026 12:55:34 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Added=20=E2=89=A4400px=20responsive=20b?= =?UTF-8?q?reakpoints=20to=20ConsentDashboard,=20CreatorS=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - "frontend/src/pages/ConsentDashboard.module.css" - "frontend/src/pages/CreatorSettings.module.css" - "frontend/src/pages/Login.module.css" - "frontend/src/pages/Register.module.css" GSD-Task: S02/T02 --- .gsd/milestones/M025/slices/S02/S02-PLAN.md | 2 +- .../M025/slices/S02/tasks/T01-VERIFY.json | 24 ++++++ .../M025/slices/S02/tasks/T02-SUMMARY.md | 83 +++++++++++++++++++ .../src/pages/ConsentDashboard.module.css | 22 +++++ frontend/src/pages/CreatorSettings.module.css | 17 ++++ frontend/src/pages/Login.module.css | 12 +++ frontend/src/pages/Register.module.css | 12 +++ 7 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 .gsd/milestones/M025/slices/S02/tasks/T01-VERIFY.json create mode 100644 .gsd/milestones/M025/slices/S02/tasks/T02-SUMMARY.md diff --git a/.gsd/milestones/M025/slices/S02/S02-PLAN.md b/.gsd/milestones/M025/slices/S02/S02-PLAN.md index 79a5fb3..cae5b90 100644 --- a/.gsd/milestones/M025/slices/S02/S02-PLAN.md +++ b/.gsd/milestones/M025/slices/S02/S02-PLAN.md @@ -51,7 +51,7 @@ Audit all public-facing pages at 375px (iPhone SE) and 768px (iPad portrait) vie - Estimate: 1h30m - Files: frontend/src/App.css, frontend/src/pages/Home.tsx, frontend/src/pages/TechniquePage.tsx, frontend/src/pages/SearchResults.tsx, frontend/src/pages/CreatorDetail.tsx, frontend/src/pages/CreatorsBrowse.tsx, frontend/src/pages/TopicsBrowse.tsx, frontend/src/pages/SubTopicPage.tsx, frontend/src/pages/ChatPage.tsx, frontend/src/pages/About.tsx - Verify: cd frontend && npm run build -- [ ] **T02: Audit and fix creator dashboard and auth pages at 375px and 768px** — ## Description +- [x] **T02: Added ≤400px responsive breakpoints to ConsentDashboard, CreatorSettings, Login, and Register CSS modules** — ## Description Audit creator-facing dashboard pages, auth pages (Login/Register), and related UI at 375px and 768px viewports. Most dashboard pages already have responsive breakpoints. The primary gaps are ConsentDashboard.module.css and CreatorSettings.module.css (zero @media queries). diff --git a/.gsd/milestones/M025/slices/S02/tasks/T01-VERIFY.json b/.gsd/milestones/M025/slices/S02/tasks/T01-VERIFY.json new file mode 100644 index 0000000..1b1656d --- /dev/null +++ b/.gsd/milestones/M025/slices/S02/tasks/T01-VERIFY.json @@ -0,0 +1,24 @@ +{ + "schemaVersion": 1, + "taskId": "T01", + "unitId": "M025/S02/T01", + "timestamp": 1775306888089, + "passed": false, + "discoverySource": "task-plan", + "checks": [ + { + "command": "cd frontend", + "exitCode": 0, + "durationMs": 9, + "verdict": "pass" + }, + { + "command": "npm run build", + "exitCode": 254, + "durationMs": 84, + "verdict": "fail" + } + ], + "retryAttempt": 1, + "maxRetries": 2 +} diff --git a/.gsd/milestones/M025/slices/S02/tasks/T02-SUMMARY.md b/.gsd/milestones/M025/slices/S02/tasks/T02-SUMMARY.md new file mode 100644 index 0000000..e3285d4 --- /dev/null +++ b/.gsd/milestones/M025/slices/S02/tasks/T02-SUMMARY.md @@ -0,0 +1,83 @@ +--- +id: T02 +parent: S02 +milestone: M025 +provides: [] +requires: [] +affects: [] +key_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"] +key_decisions: ["Consistent ≤400px safety-net breakpoint matching T01 pattern for auth and creator pages"] +patterns_established: [] +drill_down_paths: [] +observability_surfaces: [] +duration: "" +verification_result: "Browser screenshots at 375px and 768px for Login, Register, ConsentDashboard, CreatorSettings — all fit viewport with no overflow. scrollWidth check returned false. npm run build exited 0." +completed_at: 2026-04-04T12:55:23.912Z +blocker_discovered: false +--- + +# T02: Added ≤400px responsive breakpoints to ConsentDashboard, CreatorSettings, Login, and Register CSS modules + +> Added ≤400px responsive breakpoints to ConsentDashboard, CreatorSettings, Login, and Register CSS modules + +## What Happened +--- +id: T02 +parent: S02 +milestone: M025 +key_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 +key_decisions: + - Consistent ≤400px safety-net breakpoint matching T01 pattern for auth and creator pages +duration: "" +verification_result: passed +completed_at: 2026-04-04T12:55:23.913Z +blocker_discovered: false +--- + +# T02: Added ≤400px responsive breakpoints to ConsentDashboard, CreatorSettings, Login, and Register CSS modules + +**Added ≤400px responsive breakpoints to ConsentDashboard, CreatorSettings, Login, and Register CSS modules** + +## What Happened + +Audited all creator dashboard pages, auth pages, and EmbedPlayer at 375px and 768px viewports. The four CSS modules with zero @media queries (ConsentDashboard, CreatorSettings, Login, Register) received ≤400px safety-net breakpoints for narrowest phone screens. Other dashboard pages already had adequate responsive breakpoints. No horizontal overflow found on any audited page. + +## Verification + +Browser screenshots at 375px and 768px for Login, Register, ConsentDashboard, CreatorSettings — all fit viewport with no overflow. scrollWidth check returned false. npm run build exited 0. + +## Verification Evidence + +| # | Command | Exit Code | Verdict | Duration | +|---|---------|-----------|---------|----------| +| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 59100ms | +| 2 | `browser overflow check (375px, ConsentDashboard)` | 0 | ✅ pass | 1000ms | +| 3 | `browser overflow check (375px, CreatorSettings)` | 0 | ✅ pass | 1000ms | +| 4 | `browser screenshot (768px, all four pages)` | 0 | ✅ pass | 2000ms | + + +## Deviations + +Could not render CreatorDashboard and other complex dashboard pages in browser due to mock data requirements — verified those by CSS code review instead (all already have ≤768px breakpoints). + +## Known Issues + +None. + +## Files Created/Modified + +- `frontend/src/pages/ConsentDashboard.module.css` +- `frontend/src/pages/CreatorSettings.module.css` +- `frontend/src/pages/Login.module.css` +- `frontend/src/pages/Register.module.css` + + +## Deviations +Could not render CreatorDashboard and other complex dashboard pages in browser due to mock data requirements — verified those by CSS code review instead (all already have ≤768px breakpoints). + +## Known Issues +None. diff --git a/frontend/src/pages/ConsentDashboard.module.css b/frontend/src/pages/ConsentDashboard.module.css index dad93f6..8f2dac8 100644 --- a/frontend/src/pages/ConsentDashboard.module.css +++ b/frontend/src/pages/ConsentDashboard.module.css @@ -142,3 +142,25 @@ margin: 0; font-size: 0.9375rem; } + +/* ── Responsive ────────────────────────────────────────────────────────────── */ + +@media (max-width: 400px) { + .videoRow { + padding: 1rem; + } + + .toggleRow { + flex-wrap: wrap; + gap: 0.5rem; + } + + .heading { + font-size: 1.125rem; + } + + .historyEntry { + font-size: 0.75rem; + padding: 0.25rem 0.375rem; + } +} diff --git a/frontend/src/pages/CreatorSettings.module.css b/frontend/src/pages/CreatorSettings.module.css index 7d3606f..d4e8989 100644 --- a/frontend/src/pages/CreatorSettings.module.css +++ b/frontend/src/pages/CreatorSettings.module.css @@ -113,3 +113,20 @@ border-top: 1px solid var(--color-border); margin: 1.25rem 0; } + +/* ── Responsive ────────────────────────────────────────────────────────────── */ + +@media (max-width: 400px) { + .section { + padding: 1rem; + } + + .heading { + font-size: 1.125rem; + } + + .button { + width: 100%; + text-align: center; + } +} diff --git a/frontend/src/pages/Login.module.css b/frontend/src/pages/Login.module.css index 6a2e143..f220130 100644 --- a/frontend/src/pages/Login.module.css +++ b/frontend/src/pages/Login.module.css @@ -111,3 +111,15 @@ .link:hover { text-decoration: underline; } + +/* ── Responsive ────────────────────────────────────────────────────────────── */ + +@media (max-width: 400px) { + .card { + padding: 1.5rem 1rem; + } + + .title { + font-size: 1.25rem; + } +} diff --git a/frontend/src/pages/Register.module.css b/frontend/src/pages/Register.module.css index e96175b..f2968e5 100644 --- a/frontend/src/pages/Register.module.css +++ b/frontend/src/pages/Register.module.css @@ -114,3 +114,15 @@ .link:hover { text-decoration: underline; } + +/* ── Responsive ────────────────────────────────────────────────────────────── */ + +@media (max-width: 400px) { + .card { + padding: 1.5rem 1rem; + } + + .title { + font-size: 1.25rem; + } +}