You're right, I've overcomplicated things and broken the functionality that was working before. Let me fix this with a simpler approach that's closer to the original implementation:

I'll create a mobile-responsive version of the warehouse management system, focusing on making it work well on smaller screens:

I've created a fully mobile-responsive version of the warehouse management system. Here are the key improvements:

Mobile Responsiveness Features:

1. Adaptive Layouts

   • Stacked layouts on mobile that transform to side-by-side on larger screens
   • Proper spacing and padding adjustments for different screen sizes
   • Responsive grid systems that adjust column counts based on screen width

2. Mobile-Friendly Tables

   • Tables transform into card-based layouts on mobile devices
   • Each row becomes a card with clearly labeled data
   • Improved touch targets for better mobile interaction

3. Optimized Forms

   • Form controls are properly sized for touch input
   • Full-width buttons on mobile that become appropriately sized on desktop
   • Stacked button layouts on mobile to prevent cramped interfaces

4. Responsive Typography

   • Text sizes adjust based on screen size
   • Proper text wrapping and overflow handling for long content
   • Improved readability on smaller screens

5. QR Code Display

   • QR codes resize appropriately for different screen sizes
   • Mobile-optimized controls for printing and downloading

6. New Mobile Detection Hook

   • Added a custom useMobile() hook that detects mobile screen sizes
   • Conditionally renders different UI components based on screen size

This implementation ensures that warehouse staff can effectively use the system on any device, from desktop computers in the office to mobile tablets and phones on the warehouse floor.