fix: packet monitor renders on mobile devices

[Yeraze]

Summary

Fixes packet monitor not rendering on mobile devices. The CSS had a blanket hide rule on .packet-monitor-panel at 768px that hid it everywhere — sidebar tab, standalone page, and map overlay.

Only the map overlay should be hidden on mobile (already handled by .packet-monitor-container in App.css). Removed the panel-level hide rule and added mobile-friendly styles instead.

Changes

File	Change
src/components/PacketMonitorPanel.css	Removed display: none rule, added mobile scroll/wrap styles
src/components/PacketMonitorPanel.tsx	Added standalone prop
src/pages/PacketMonitorPage.tsx	Pass standalone to panel

Test plan

• npm run build — no errors
• Mobile: sidebar packet monitor tab renders
• Mobile: standalone /packet-monitor page renders
• Desktop: map overlay still hides on resize below 768px

[github-actions]

Claude finished @Yeraze's task —— View job

---

PR Review Complete ✅

I've reviewed this mobile packet monitor fix. The changes are well-targeted and address the core issue effectively.

Review Tasks

• Read and analyze changed files
• Review CSS mobile responsiveness changes
• Check TypeScript component prop implementation
• Assess potential bugs and issues
• Evaluate security and performance considerations
• Check test coverage needs
• Provide comprehensive feedback

Code Quality & Implementation ✅

Excellent problem identification and solution:

• Correctly identified that the blanket display: none rule on .packet-monitor-panel was too broad
• The fix is surgical - removes the problematic rule and adds mobile-friendly styles instead
• The standalone prop addition is clean and follows existing patterns

CSS Changes in PacketMonitorPanel.css:

• ✅ Removed the overly broad display: none rule at 768px breakpoint
• ✅ Added mobile-specific enhancements: flex-wrap for header, touch scrolling
• ✅ Mobile styles are defensive and improve UX without breaking desktop

TypeScript Changes:

• ✅ standalone?: boolean prop properly typed as optional
• ✅ Prop correctly passed from PacketMonitorPage to PacketMonitorPanel
• ✅ CSS class application follows React conventions: ${standalone ? ' packet-monitor-standalone' : ''}

Potential Issues & Observations ⚠️

1. Unused CSS class: The packet-monitor-standalone class is applied but no CSS rules are defined for it. While this doesn't break anything, it suggests incomplete implementation or future-proofing.

2. Missing responsive breakpoints: The mobile styles only target max-width: 768px. Consider if tablet sizes (768px-1024px) need different treatment.

3. Touch scrolling: -webkit-overflow-scrolling: touch is deprecated in newer iOS versions, but keeping it doesn't hurt for older device support.

Security & Performance ✅

• ✅ No security concerns - purely UI changes
• ✅ Performance impact is minimal - just CSS rule changes
• ✅ No new dependencies or complex logic added

Test Coverage 📝

• The changes don't include tests, but they're primarily CSS/responsive changes
• The existing functionality remains unchanged - only display behavior is fixed
• Manual testing described in PR covers the key scenarios

Architecture & Best Practices ✅

• ✅ Follows existing codebase patterns for prop handling
• ✅ Separates concerns properly (CSS handles responsive behavior, TS handles prop passing)
• ✅ No breaking changes to existing API

Recommendations

1. Consider adding CSS rules for packet-monitor-standalone if there are intended styles for the standalone mode, or remove the class application if it's not needed.

2. Future enhancement: Consider adding intermediate breakpoints for tablet-sized devices if the current mobile styles aren't optimal for those screens.

Overall Assessment ⭐⭐⭐⭐⭐

This is a high-quality, focused fix that solves the exact problem described. The implementation is clean, follows existing patterns, and doesn't introduce any regressions. The approach of removing the overly broad CSS rule and adding targeted mobile enhancements is the right solution.

Recommendation: Approve and merge ✅

---