rock/riotpiao.com
0
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

[E2E] Test: Responsive Layout + Footer #11

New Issue
Open
opened 2026-09-08 04:48:10 +00:00 by rock · 0 comments
rock commented 2026-09-08 04:48:10 +00:00
Owner
Copy Link
Copy Source

Parent

Ref: #5
Depends on: #6

Objective

Verify layout at desktop/tablet/mobile breakpoints. No overflow, correct stacking, footer links functional.

Viewports

  • Desktop: 1920x1080
  • Tablet: 768x1024
  • Mobile: 375x667

Test Cases

Desktop (1920px) (responsive.spec.ts)

  • Full nav visible (no hamburger)
  • Project cards in single-column grid (max-w-3xl)
  • Hero section centered with max-w-4xl
  • Terminal opens in bottom-right corner
  • No horizontal scrollbar

Tablet (768px)

  • Nav still visible (md breakpoint)
  • Layout adapts, no overflow
  • Project cards stack properly
  • Bio modal fits screen

Mobile (375px)

  • Hamburger menu replaces nav (hidden md:flex on nav)
  • Hero title wraps correctly (text-4xl to md:text-5xl)
  • Project cards full width
  • Terminal usable at small size
  • Bio modal max-h respects mobile viewport
  • No content clipped or overflowing
  • Footer centered and readable

Footer (footer.spec.ts)

  • Copyright text visible
  • GitHub link points to github.com/rockliang
  • Email link has mailto:[email protected]
  • Links have hover styles
  • Footer border visible

Cross-Viewport Interactions

  • Open bio modal at desktop, resize to mobile → modal still usable
  • Open terminal at mobile → resize handle still works
  • Language toggle works at all viewports

Acceptance

  • Zero horizontal overflow at all 3 viewports
  • All interactive elements accessible at mobile
  • Footer links functional at all sizes
  • No text truncation that hides critical content
## Parent Ref: #5 Depends on: #6 ## Objective Verify layout at desktop/tablet/mobile breakpoints. No overflow, correct stacking, footer links functional. ## Viewports - Desktop: 1920x1080 - Tablet: 768x1024 - Mobile: 375x667 ## Test Cases ### Desktop (1920px) (`responsive.spec.ts`) - [ ] Full nav visible (no hamburger) - [ ] Project cards in single-column grid (`max-w-3xl`) - [ ] Hero section centered with max-w-4xl - [ ] Terminal opens in bottom-right corner - [ ] No horizontal scrollbar ### Tablet (768px) - [ ] Nav still visible (md breakpoint) - [ ] Layout adapts, no overflow - [ ] Project cards stack properly - [ ] Bio modal fits screen ### Mobile (375px) - [ ] Hamburger menu replaces nav (`hidden md:flex` on nav) - [ ] Hero title wraps correctly (text-4xl to md:text-5xl) - [ ] Project cards full width - [ ] Terminal usable at small size - [ ] Bio modal max-h respects mobile viewport - [ ] No content clipped or overflowing - [ ] Footer centered and readable ### Footer (`footer.spec.ts`) - [ ] Copyright text visible - [ ] GitHub link points to github.com/rockliang - [ ] Email link has mailto:[email protected] - [ ] Links have hover styles - [ ] Footer border visible ### Cross-Viewport Interactions - [ ] Open bio modal at desktop, resize to mobile → modal still usable - [ ] Open terminal at mobile → resize handle still works - [ ] Language toggle works at all viewports ## Acceptance - Zero horizontal overflow at all 3 viewports - All interactive elements accessible at mobile - Footer links functional at all sizes - No text truncation that hides critical content
rock added this to the Functional Testing milestone 2026-09-08 04:55:47 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone Functional Testing
Projects
Clear projects
No projects
Assignees
Clear assignees
rock (Rock)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: rock/riotpiao.com#11