Skip to content

Tier 4: Add breakpoint boundary-width tests (767/768, 1023/1024) #24

Description

@encomp

Context

Tier 4 viewport specs test at canonical widths (390, 768, 1280) but don't test the exact CSS breakpoint boundaries. Off-by-one errors in media queries or useBreakpoint() could cause layout glitches at exactly 767px or 1023px.

Scope

Add 1-2 specs that test at boundary widths:

  • 767px — should render mobile layout (bottom tab bar, SwipeCard, no sidebar)
  • 768px — should render tablet layout (rail sidebar, TxnTable, no bottom tab bar)
  • 1023px — should render tablet layout
  • 1024px — should render desktop layout (full sidebar)

References

  • Breakpoints defined in useBreakpoint.ts: mobile < 768, tablet 768-1023, desktop >= 1024
  • Existing tier4 specs at tests/e2e/tier4/ cover canonical widths
  • Design spec: docs/superpowers/specs/2026-05-19-tier4-e2e-viewport-design.md

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1Highest priorityenhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions