responsive design improvements

[pstaylor-patrick]

Related to #6

👋 TL;DR

Added responsive design improvements across dashboard components and fixed horizontal overflow issues by implementing mobile-first layouts, responsive padding, and proper overflow handling.

🔎 Details

This PR focuses on improving the responsive behavior of the dashboard application to ensure better usability on mobile devices and smaller screens. The changes include:

1. Fixed horizontal overflow - Added overflow-x: hidden to html/body elements to prevent unwanted horizontal scrolling
2. Responsive padding adjustments - Added responsive padding to dashboard components for better mobile spacing
3. Mobile-first grid layouts - Made data-diff responsive with mobile-first grid layouts
4. Flexible component layouts - Improved filter bar responsiveness with flex-wrap for better wrapping on small screens
5. Query runner responsiveness - Made query runner responsive on small screens
6. Improved header layouts - Enhanced schema diff header layout with responsive wrapping
7. Tab component improvements - Added horizontal scroll and responsive padding to tabs for better mobile experience

Key component updates:

• Dashboard components now have responsive padding
• Data-diff panels use mobile-first grid layouts
• Filter bar elements wrap properly on small screens
• Query runner adapts to small screen sizes
• Schema diff header elements wrap appropriately
• Tabs component supports horizontal scrolling with responsive padding

✅ How to Test

1. Responsive layout testing:

   • Resize browser window from desktop to mobile sizes (320px+)
   • Verify no horizontal scrollbars appear unexpectedly
   • Check that all components adapt appropriately to different screen widths

2. Mobile-specific testing:

   • Test on actual mobile devices or using browser devtools mobile emulation
   • Verify touch targets are appropriately sized and spaced
   • Confirm text remains readable without zooming

3. Component functionality:

   • Test the query runner in both preset and custom modes on small screens
   • Verify filter bar elements wrap and remain functional
   • Check that data-diff panels display correctly with mobile-first grid
   • Confirm tabs remain accessible and scrollable on mobile
   • Ensure schema diff header wraps appropriately

4. Visual regression:

   • Compare desktop and mobile views for consistency
   • Verify padding and spacing maintains visual hierarchy
   • Ensure no content is clipped or overlapping

🥜 GIF