Improve mobile styles for compression frame analysis

[codegen-sh]

📱 Mobile UX Improvements for Compression Frame Analysis

This PR addresses the mobile usability issues in the Interactive Frame Analysis section of the forensic analysis dashboard.

🎯 Changes Made

Layout Improvements:

• ✅ Moved Previous/Next/Auto Play buttons above the slider on mobile - Better thumb accessibility
• ✅ Stacked frame controls vertically - Improved mobile layout flow
• ✅ Reduced padding and margins - Better space utilization on small screens

Content Optimization:

• ✅ Hidden delivery format and load time info on mobile - Reduces clutter as requested
• ✅ Compressed frame info layout - Vertical stacking for better readability
• ✅ Optimized discontinuity info section - Smaller text and spacing for mobile

🔧 Technical Details

• Added comprehensive mobile-specific CSS rules within @media (max-width: 768px)
• Restructured HTML to use .frame-controls-top wrapper for button grouping
• Used CSS order property to reposition slider below buttons on mobile
• Maintained desktop layout compatibility with display: contents fallback

📱 Mobile-Specific Features

• Button Layout: Previous/Next/Auto Play buttons now appear in a row above the slider
• Reduced Clutter: Performance info (WebP format, load time) hidden on mobile
• Better Spacing: Reduced gutters and padding for optimal mobile viewing
• Improved Typography: Smaller font sizes for better mobile readability

🖥️ Desktop Compatibility

• Desktop layout remains unchanged
• All existing functionality preserved
• Responsive design maintains visual hierarchy

Fixes CG-19005

---

💻 View my work • About Codegen