fix: comprehensive mobile touch scrolling for log viewer

[khaliqgant]

Summary

Fixes mobile touch scrolling in the log viewer that PR #153 attempted to fix but didn't fully resolve.

Root Cause Analysis

The previous fix (#153) only partially addressed the issue:

1. Incomplete element targeting: xterm.js has multiple DOM elements that can intercept touch events - the canvas, helper-textarea, and rows div were not targeted
2. Nested scrollable containers: The container div had overflow-auto, creating TWO scrollable containers (the container AND xterm-viewport). This confuses mobile touch handling because the browser doesn't know which container should scroll
3. CSS specificity: Without !important, xterm.js inline styles could override our touch-action rules

Changes

XTermLogViewer.tsx

• Extended touch-action: pan-y to ALL xterm elements: .xterm, .xterm-viewport, .xterm-screen, canvas, .xterm-helper-textarea, .xterm-rows
• Added !important to ensure rules override xterm's inline styles
• Key fix: Removed overflow-auto from container div - let xterm-viewport be the sole scrollable element

LogViewer.tsx (inline mode)

• Added overscrollBehavior: 'contain' to prevent iOS page bounce

Test plan

• Open log viewer panel on mobile (iOS Safari)
• Open log viewer panel on mobile (Android Chrome)
• Verify touch scrolling works in both directions
• Verify scrolling doesn't trigger page scroll when reaching bounds
• Verify desktop scroll (mouse wheel) still works

🤖 Generated with Claude Code

[my-senior-dev-pr-review]

🤖 My Senior Dev — Analysis Complete

👤 For @khaliqgant

📁 Expert in src/dashboard/react-components/ (2 edits) • ⚡ 12th PR this month

View your contributor analytics →

---

📊 2 files reviewed • 1 need attention

⚠️ Needs Attention:

• src/dashboard/react-components/LogViewer.tsx — Modifications enhance touch scrolling behavior, which can significantly impact usability on mobile devices.

---

🚀 Open Interactive Review →

The full interface unlocks features not available in GitHub:

• 💬 AI Chat — Ask questions on any file, get context-aware answers
• 🔍 Smart Hovers — See symbol definitions and usage without leaving the diff
• 📚 Code Archeology — Understand how files evolved over time (/archeology)
• 🎯 Learning Insights — See how this PR compares to similar changes

---

💬 Chat here: @my-senior-dev explain this change — or try @chaos-monkey @security-auditor @optimizer @skeptic @junior-dev

📖 View all 12 personas & slash commands

You can interact with me by mentioning @my-senior-dev in any comment:

In PR comments or on any line of code:

• Ask questions about the code or PR
• Request explanations of specific changes
• Get suggestions for improvements

Slash commands:

• /help — Show all available commands
• /archeology — See the history and evolution of changed files
• /profile — Performance analysis and suggestions
• /expertise — Find who knows this code best
• /personas — List all available AI personas

AI Personas (mention to get their perspective):

Persona	Focus
@chaos-monkey 🐵	Edge cases & failure scenarios
@skeptic 🤨	Challenge assumptions
@optimizer ⚡	Performance & efficiency
@security-auditor 🔒	Security vulnerabilities
@accessibility-advocate ♿	Inclusive design
@junior-dev 🌱	Simple explanations
@tech-debt-collector 💳	Code quality & shortcuts
@ux-champion 🎨	User experience
@devops-engineer 🚀	Deployment & scaling
@documentation-nazi 📚	Documentation gaps
@legacy-whisperer 🏛️	Working with existing code
@test-driven-purist ✅	Testing & TDD

For the best experience, view this PR on myseniordev.com — includes AI chat, file annotations, and interactive reviews.