feat: Added ≤400px responsive breakpoints to ConsentDashboard, CreatorS…

- "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

@@ -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).
 

.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
+}

.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.

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}