Skip to content

Add mobile-responsive layout to viz UI#40

Merged
joe32140 merged 1 commit intomainfrom
feature/mobile-responsive
Mar 14, 2026
Merged

Add mobile-responsive layout to viz UI#40
joe32140 merged 1 commit intomainfrom
feature/mobile-responsive

Conversation

@joe32140
Copy link
Copy Markdown
Contributor

Summary

  • Stack paper/comment panels on mobile (≤768px) with a bottom nav bar to switch between views
  • Tapping a highlighted paragraph auto-switches to the Comments panel; tapping a comment card auto-switches to the Paper panel
  • Header wraps to two rows on mobile (paper select drops to second row); legend hidden on small screens
  • Comment count badge on the mobile nav Comments button
  • Extra compact layout at ≤480px (version badge hidden, smaller metrics bar)

Test plan

  • Open http://localhost:8080 in desktop browser — layout unchanged
  • Open in mobile browser or DevTools device emulator (≤768px) — bottom nav appears, single-panel switching works
  • Tap a highlighted paragraph → switches to Comments panel and scrolls to card
  • Tap a comment card with a location → switches to Paper panel and scrolls to paragraph
  • Switch papers from dropdown → resets to Paper panel on mobile

🤖 Generated with Claude Code

- Stack paper/comment panels on mobile (≤768px) with bottom nav to switch between them
- Tapping a paragraph auto-switches to Comments; tapping a comment card auto-switches to Paper
- Header wraps to two rows on mobile; legend hidden
- Comment count badge on mobile nav Comments button
- Fix duplicate `paper` variable declaration in render()

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@joe32140 joe32140 requested a review from dangng2004 March 13, 2026 17:15
@joe32140 joe32140 merged commit 9f83762 into main Mar 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant