feat(mobile): mobile-first foundation (viewport, dvh, touch-target, safe-area, reduced-motion) — PRD-1#176
Merged
Conversation
PRD-1 mobile-first-foundation, PRD-2 brand-consistency, PRD-3 mobile-navigation, PRD-4 meus-treinos-kebab, PRD-5 workout-session-fullscreen, PRD-6 kpi-charts-mobile, PRD-7 login-parity-nextfont, PRD-8 aluno-detail-tables-mobile. Co-Authored-By: Claude <noreply@anthropic.com>
…t, safe-area) - layout.tsx: viewport export (viewportFit cover unlocks safe-area-inset) - globals.css: .touch-target 44px util, body safe-area padding, overscroll-behavior none, prefers-reduced-motion query (WCAG 2.2 SC 2.3.3) - vh/screen -> dvh across page.tsx, aluno/layout.tsx, dashboard/layout.tsx, login/page.tsx, aluno/login/page.tsx, aluno/dashboard/dashboard-client.tsx, dashboard/alunos/page.tsx, dashboard/financeiro/page.tsx, global-error.tsx (fix iOS Safari URL-bar jump) - aluno-header.tsx: trigger h-9 w-9 -> h-11 w-11 + touch-target (HIG 44pt) - alunos/page.test.tsx: .min-h-screen -> .min-h-dvh assertion Gates: typecheck, lint, test (1119), format:check all green. Refs docs/superpowers/specs/2026-07-07-mobile-first-foundation-design.md Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
WalkthroughThis PR adds seven mobile-focused design specification documents to ChangesDesign specification documents
Mobile-first foundation implementation
Estimated code review effort: 2 (Simple) | ~12 minutes Sequence Diagram(s) Not applicable — changes are documentation additions and simple CSS/class-level styling updates without multi-component control flow. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
5 issues found across 21 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
docs/superpowers/specs/2026-07-07-brand-consistency-design.md (1)
40-52: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winKeep this spec token-only.
The
trendfield and delta-badge logic are a separate KPI data-model change, which contradicts the file’s own “Zero structural change” scope and overlaps the KPI/charts PRD. Split that requirement into the KPI spec and leave this doc focused on the orange→cyan token swap.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/superpowers/specs/2026-07-07-brand-consistency-design.md` around lines 40 - 52, The spec currently mixes in KPI delta/trend behavior, which is outside this doc’s “Zero structural change” scope and overlaps the KPI data-model work. Remove the `kpi.trend`, delta-badge, and `kpi.color.replaceAll` guidance from this document, and keep the content focused only on the orange→cyan token swap in the design spec so the KPI logic can live in the separate KPI/charts spec.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/superpowers/specs/2026-07-07-aluno-detail-tables-mobile-design.md`:
- Around line 68-70: Preserve the existing empty-state copy instead of changing
it to the new generic text. Update the spec to match the current behavior in the
alumnos detail page, and keep the contract used by the `page.tsx` empty-state
rendering and its related test expecting “Nenhum treino cadastrado para este
aluno.”. Do not replace that string with “Nenhum registro.” in the design notes
or implementation guidance.
In `@docs/superpowers/specs/2026-07-07-kpi-charts-mobile-design.md`:
- Around line 80-85: The chart legend example is not actually responsive and
conflicts with the prose about mobile versus desktop behavior. Update the spec
in the Legend section to either describe a breakpoint-dependent switch in the
example using the Legend component, or simplify the requirement to a single
layout so the intended behavior is unambiguous.
In `@docs/superpowers/specs/2026-07-07-meus-treinos-kebab-design.md`:
- Around line 57-62: The current E2E test IDs are too generic and will collide
across multiple treino cards, making selectors ambiguous. Update the test hooks
referenced in the spec so the card and action identifiers are namespaced per
treino or moved behind a scoped container hook, and use the unique symbols
treino-card, iniciar-treino, treino-kebab, editar-treino, and excluir-treino as
the places to apply the new naming scheme. Ensure each rendered card can be
targeted unambiguously, and prefer scoped selectors plus text checks where
appropriate.
In `@docs/superpowers/specs/2026-07-07-mobile-first-foundation-design.md`:
- Around line 40-46: The fenced code blocks in this spec are unlabeled, which
keeps markdownlint MD040 active. Update both fenced sections mentioned in the
comment to include a language tag (for example, label the blocks as text) so the
documentation in this file renders as properly labeled fenced code blocks.
---
Nitpick comments:
In `@docs/superpowers/specs/2026-07-07-brand-consistency-design.md`:
- Around line 40-52: The spec currently mixes in KPI delta/trend behavior, which
is outside this doc’s “Zero structural change” scope and overlaps the KPI
data-model work. Remove the `kpi.trend`, delta-badge, and `kpi.color.replaceAll`
guidance from this document, and keep the content focused only on the
orange→cyan token swap in the design spec so the KPI logic can live in the
separate KPI/charts spec.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c2bf938c-6f73-420c-9204-e435af5033e2
📒 Files selected for processing (21)
docs/superpowers/specs/2026-07-07-aluno-detail-tables-mobile-design.mddocs/superpowers/specs/2026-07-07-brand-consistency-design.mddocs/superpowers/specs/2026-07-07-kpi-charts-mobile-design.mddocs/superpowers/specs/2026-07-07-login-parity-nextfont-design.mddocs/superpowers/specs/2026-07-07-meus-treinos-kebab-design.mddocs/superpowers/specs/2026-07-07-mobile-first-foundation-design.mddocs/superpowers/specs/2026-07-07-mobile-navigation-design.mddocs/superpowers/specs/2026-07-07-workout-session-fullscreen-design.mdsrc/app/aluno/aluno-header.tsxsrc/app/aluno/dashboard/dashboard-client.tsxsrc/app/aluno/layout.tsxsrc/app/aluno/login/page.tsxsrc/app/dashboard/alunos/page.test.tsxsrc/app/dashboard/alunos/page.tsxsrc/app/dashboard/financeiro/page.tsxsrc/app/dashboard/layout.tsxsrc/app/global-error.tsxsrc/app/globals.csssrc/app/layout.tsxsrc/app/login/page.tsxsrc/app/page.tsx
Comment on lines
+57
to
+62
| Data-testid for E2E stability: | ||
| - Card: `data-testid="treino-card"` | ||
| - Iniciar: `data-testid="iniciar-treino"` | ||
| - Kebab trigger: `data-testid="treino-kebab"` | ||
| - Editar item: `data-testid="editar-treino"` | ||
| - Excluir item: `data-testid="excluir-treino"` |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Namespace the data-testids.
Static IDs like treino-card and iniciar-treino will be duplicated once the page renders multiple cards, which makes E2E selectors ambiguous. Use a treino-specific suffix or a scoped container hook plus text assertions instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/superpowers/specs/2026-07-07-meus-treinos-kebab-design.md` around lines
57 - 62, The current E2E test IDs are too generic and will collide across
multiple treino cards, making selectors ambiguous. Update the test hooks
referenced in the spec so the card and action identifiers are namespaced per
treino or moved behind a scoped container hook, and use the unique symbols
treino-card, iniciar-treino, treino-kebab, editar-treino, and excluir-treino as
the places to apply the new naming scheme. Ensure each rendered card can be
targeted unambiguously, and prefer scoped selectors plus text checks where
appropriate.
Add 'text' language tag to 2 bare fenced code blocks (lines 40, 85) flagged by markdownlint MD040 / CodeRabbit. Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
- PRD-8 aluno-detail-tables: replace fictional fields (item.matricula, item.plano, bool statusPago) with real Prisma shape (m.Plano.nome, m.status StatusMatricula enum, Pagamento has no status field, TreinosList is grid not Table), real TableCell counts (4+3), preserve per-table empty strings (Nenhuma matrícula/Nenhum pagamento/Nenhum treino) - PRD-6 kpi-charts: legend responsive via existing useIsMobile hook (vertical mobile, horizontal desktop) instead of static horizontal - PRD-3 mobile-navigation: fix path aluno-layout.tsx -> layout.tsx (line 54 + Files Changed table) - PRD-4 meus-treinos: data-testid naming already per-instance scoped, no change needed Refs PR #176 review comments. Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
|
EmiyaKiritsugu3
added a commit
that referenced
this pull request
Jul 6, 2026
…PRD-3 (#179) * feat(mobile): add bottom navigation bar for mobile aluno + dashboard — PRD-3 - New src/components/bottom-nav.tsx: shared mobile-only BottomNav (md:hidden), 44pt touch-target, safe-area pb, reduced-motion-safe transitions, lucide iconName string union avoids ReactNode serialization across server/client - Wire BottomNav into aluno layout (2 items) + dashboard layout via DashboardBottomNav client wrapper (usePathname + getNavItems, role-filtered; dev item stays sidebar-only) - Extract getNavItems(role) from DashboardNav into reusable selector; sidebar + bottom bar share one source of role-filtered nav truth - Remove redundant md:hidden nav block from aluno UserMenu dropdown (primary nav now bottom bar); drop unused navLinks prop from UserMenu - pb-16/pb-20 on main content reserves space above fixed bottom bar - Tests: bottom-nav.test.tsx (6), updated aluno-header.test.tsx (drop removed prop); dashboard-nav.test.tsx unchanged (14 green) Refs: PRD-3 mobile-navigation-design, builds on PRD-1 foundation (#176) Co-Authored-By: Claude <noreply@anthropic.com> * docs: update CURRENT-STATE for PRD-3 bottom nav (PR #179) Co-Authored-By: Claude <noreply@anthropic.com> * fix(mobile): address 5 cubic review findings on PR #179 - Extract isNavActive() pure fn to bottom-nav.tsx, reuse in DashboardNav (P2: was duplicated isActive logic) - Export DEV_HREF from dashboard-nav, import in DashboardBottomNav wrapper (P3: dev route string duplicated) - Move DashboardBottomNav out of SidebarInset (<main>) into parent div (P3: nav landmark nested inside main — aluno layout already kept nav outside main) - Remove dead DashboardNavItem type alias (P3: exported never consumed) - Add dashboard-bottom-nav.test.tsx: 4 tests asserting role filtering (GERENTE 5 items, FINANCIAL_ROUTES excludes Financeiro+Planos for INSTRUTOR), DEV_HREF exclusion, bottom-nav-limit ≤5 (P2: no test coverage) - Add FolderKanban to dashboard-nav.test.tsx lucide mock (now imported via bottom-nav real module chain) Gates: typecheck ✅, lint ✅, 1129/1129 tests ✅. Co-Authored-By: Claude <noreply@anthropic.com> * docs(mobile): correct test count in CURRENT-STATE (1125→1129) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Emiya Kiritsugu <emiyakiritsugu3@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com>
7 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PRD-1 of 8 mobile-first premium polish plan. Foundational infrastructure only — zero visual redesign. Unblocks PRDs 2-8 (
touch-targetutil, dvh units, reduced-motion gate consumed downstream).Webapp primary target is phone (user directive 2026-07-05). Current foundation broken for mobile:
vh/screenunits jump ~80px on iOS Safari URL bar show/hideprefers-reduced-motion(vestibular users no opt-out)Changes
export const viewport(viewportFit cover unlocksenv(safe-area-inset-*), colorScheme dark).touch-target44px util, body safe-area padding,overscroll-behavior: none,prefers-reduced-motionmedia query (WCAG 2.2 SC 2.3.3)page.tsx,aluno/layout.tsx,dashboard/layout.tsx,login/page.tsx,aluno/login/page.tsx,aluno/dashboard/dashboard-client.tsx,dashboard/alunos/page.tsx,dashboard/financeiro/page.tsx,global-error.tsxh-9 w-9→h-11 w-11+touch-target.min-h-screen→.min-h-dvhConstitution Check
viewporttypedViewportfromnext. Noany. ✅feat/008-mobile-first-foundation. Conventional commits. ✅Verification
npm run typecheck✅npm run lint✅ (no new issues; pre-existing inmongo-init.js,global-setup.ts,commitlint.config.cjs)npm test✅ (108 files, 1119 tests)npm run format:check✅ (13 edited files clean; pre-existing.superpowers/sdd/doc warnings unrelated)Spec
docs/superpowers/specs/2026-07-07-mobile-first-foundation-design.md
Out of Scope (downstream PRDs)
Bottom nav (PRD-3), brand palette (PRD-2), KPI/charts (PRD-6), next/font (PRD-7), kebab + empty state (PRD-4), workout fullscreen (PRD-5), aluno detail tables (PRD-8).
🤖 Generated with Claude Code
Summary by cubic
Mobile-first foundation (PRD-1): sets a proper viewport, swaps
vhtodvh, adds safe-area padding, 44px touch-targets, and reduced-motion support to make the app reliable on phones. Fixes iOS URL bar jumps and notch/home-indicator overlap without visual redesign, unblocking PRDs 2–8.New Features
export const viewportwithdevice-width,initialScale=1,viewportFit=cover, and darkcolorScheme.vh/screenwithdvhacross layouts/pages; updated one test to assert.min-h-dvh.env(safe-area-inset-*)padding onbodyandoverscroll-behavior: none..touch-targetutility (44px min) and upgraded header icon buttons toh-11 w-11.prefers-reduced-motionmedia query to disable long animations.Docs
useIsMobile).Written for commit 5640d92. Summary will update on new commits.
Summary by CodeRabbit
New Features
Bug Fixes
Style