feat: Added 480px media query with 15 rule overrides for stats bar, fea…
- "frontend/src/App.css" GSD-Task: S04/T02
This commit is contained in:
jlightner
parent
18eb4e0ee8
commit
ca3d33ba34
4 changed files with 212 additions and 1 deletions
|
|
@ -78,7 +78,7 @@
|
|||
- Estimate: 45m
|
||||
- Files: frontend/src/api/public-client.ts, frontend/src/pages/CreatorDetail.tsx, frontend/src/App.css
|
||||
- Verify: cd frontend && npx tsc --noEmit && npm run build
|
||||
- [ ] **T02: Mobile responsive polish for creator detail page at 375px** — Add CSS media query fixes so the creator detail page renders cleanly at 375px (iPhone SE width). The hero already stacks vertically at 768px. This task targets the remaining narrow-screen issues: stats bar text wrapping, featured card padding, technique grid columns, social icons overflow, genre pills wrapping, and the new edit form from T01.
|
||||
- [x] **T02: Added 480px media query with 15 rule overrides for stats bar, featured card, technique grid, social icons, genre pills, and edit form on the creator detail page** — Add CSS media query fixes so the creator detail page renders cleanly at 375px (iPhone SE width). The hero already stacks vertically at 768px. This task targets the remaining narrow-screen issues: stats bar text wrapping, featured card padding, technique grid columns, social icons overflow, genre pills wrapping, and the new edit form from T01.
|
||||
|
||||
## Steps
|
||||
|
||||
|
|
|
|||
30
.gsd/milestones/M017/slices/S04/tasks/T01-VERIFY.json
Normal file
30
.gsd/milestones/M017/slices/S04/tasks/T01-VERIFY.json
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"schemaVersion": 1,
|
||||
"taskId": "T01",
|
||||
"unitId": "M017/S04/T01",
|
||||
"timestamp": 1775207919121,
|
||||
"passed": false,
|
||||
"discoverySource": "task-plan",
|
||||
"checks": [
|
||||
{
|
||||
"command": "cd frontend",
|
||||
"exitCode": 0,
|
||||
"durationMs": 4,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "npx tsc --noEmit",
|
||||
"exitCode": 1,
|
||||
"durationMs": 825,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "npm run build",
|
||||
"exitCode": 254,
|
||||
"durationMs": 90,
|
||||
"verdict": "fail"
|
||||
}
|
||||
],
|
||||
"retryAttempt": 1,
|
||||
"maxRetries": 2
|
||||
}
|
||||
78
.gsd/milestones/M017/slices/S04/tasks/T02-SUMMARY.md
Normal file
78
.gsd/milestones/M017/slices/S04/tasks/T02-SUMMARY.md
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
id: T02
|
||||
parent: S04
|
||||
milestone: M017
|
||||
provides: []
|
||||
requires: []
|
||||
affects: []
|
||||
key_files: ["frontend/src/App.css"]
|
||||
key_decisions: ["Used 480px breakpoint to cover iPhone SE through small Android devices with a single rule set"]
|
||||
patterns_established: []
|
||||
drill_down_paths: []
|
||||
observability_surfaces: []
|
||||
duration: ""
|
||||
verification_result: "TypeScript check and Vite build both pass. grep confirms 480px breakpoint exists. Slice-level checks for updateCreatorProfile and editMode also pass."
|
||||
completed_at: 2026-04-03T09:20:10.360Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T02: Added 480px media query with 15 rule overrides for stats bar, featured card, technique grid, social icons, genre pills, and edit form on the creator detail page
|
||||
|
||||
> Added 480px media query with 15 rule overrides for stats bar, featured card, technique grid, social icons, genre pills, and edit form on the creator detail page
|
||||
|
||||
## What Happened
|
||||
---
|
||||
id: T02
|
||||
parent: S04
|
||||
milestone: M017
|
||||
key_files:
|
||||
- frontend/src/App.css
|
||||
key_decisions:
|
||||
- Used 480px breakpoint to cover iPhone SE through small Android devices with a single rule set
|
||||
duration: ""
|
||||
verification_result: passed
|
||||
completed_at: 2026-04-03T09:20:10.360Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T02: Added 480px media query with 15 rule overrides for stats bar, featured card, technique grid, social icons, genre pills, and edit form on the creator detail page
|
||||
|
||||
**Added 480px media query with 15 rule overrides for stats bar, featured card, technique grid, social icons, genre pills, and edit form on the creator detail page**
|
||||
|
||||
## What Happened
|
||||
|
||||
Read existing responsive breakpoints (640px hero stacking, 768px admin layout) and full creator-detail class names. Added a @media (max-width: 480px) block with targeted overrides for stats bar (smaller font, tighter gap), topic pills (compact badges), hero (smaller name/bio, tighter gaps), featured card (reduced padding/text), techniques header (flex-wrap for sort dropdown), technique cards (reduced padding), and edit form (full-width stacked inputs). All CSS-only — no component changes needed.
|
||||
|
||||
## Verification
|
||||
|
||||
TypeScript check and Vite build both pass. grep confirms 480px breakpoint exists. Slice-level checks for updateCreatorProfile and editMode also pass.
|
||||
|
||||
## Verification Evidence
|
||||
|
||||
| # | Command | Exit Code | Verdict | Duration |
|
||||
|---|---------|-----------|---------|----------|
|
||||
| 1 | `cd frontend && npx tsc --noEmit` | 0 | ✅ pass | 2700ms |
|
||||
| 2 | `cd frontend && npm run build` | 0 | ✅ pass | 3700ms |
|
||||
| 3 | `grep -q '480px' frontend/src/App.css` | 0 | ✅ pass | 50ms |
|
||||
| 4 | `grep -q 'updateCreatorProfile' frontend/src/api/public-client.ts` | 0 | ✅ pass | 50ms |
|
||||
| 5 | `grep -q 'editMode' frontend/src/pages/CreatorDetail.tsx` | 0 | ✅ pass | 50ms |
|
||||
|
||||
|
||||
## Deviations
|
||||
|
||||
None.
|
||||
|
||||
## Known Issues
|
||||
|
||||
None.
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `frontend/src/App.css`
|
||||
|
||||
|
||||
## Deviations
|
||||
None.
|
||||
|
||||
## Known Issues
|
||||
None.
|
||||
|
|
@ -3434,6 +3434,109 @@ a.app-footer__repo:hover {
|
|||
}
|
||||
}
|
||||
|
||||
/* ── Mobile narrow (≤480px) — Creator detail page ─────────────────────── */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Stats bar: smaller text, tighter spacing */
|
||||
.creator-detail__stats-bar {
|
||||
gap: 0.25rem 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.creator-detail__stats {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.creator-detail__stats-sep {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Topic pills: ensure wrap, smaller badges */
|
||||
.creator-detail__topic-pills {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.creator-detail__topic-pills .badge {
|
||||
font-size: 0.6875rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
}
|
||||
|
||||
/* Hero: tighter on very narrow screens */
|
||||
.creator-hero__name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.creator-hero__bio {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.creator-hero__socials {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.creator-hero__genres {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* Featured card: reduce padding, contain text */
|
||||
.creator-featured {
|
||||
padding: 0.875rem 1rem;
|
||||
}
|
||||
|
||||
.creator-featured__title {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.creator-featured__summary {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
/* Techniques header: wrap title + sort */
|
||||
.creator-techniques__header {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.creator-techniques__title {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
/* Technique cards: smaller padding */
|
||||
.creator-technique-card {
|
||||
padding: 0.625rem 0.75rem;
|
||||
}
|
||||
|
||||
.creator-technique-card__title {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Edit form: full width, stacked link rows */
|
||||
.creator-edit-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.creator-edit-form__link-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.creator-edit-form__platform-select {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.creator-edit-form__url-input {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.creator-edit-form__actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.creator-edit-form__actions .btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Report Issue Modal ─────────────────────────────────────────────────── */
|
||||
|
||||
.modal-overlay {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue