Improve Responsive UI in TailAdmin React Dashboard

[devin-ai-integration]

Improve Responsive UI in TailAdmin React Dashboard

Summary

This PR implements 6 responsive UI improvements across the dashboard:

1. AppHeader.tsx: Replaced window.innerWidth check with window.matchMedia() for more reliable breakpoint detection that aligns with Tailwind's lg: breakpoint (1024px)

2. AppHeader.tsx: Increased touch target size from 40px (w-10 h-10) to 44px (w-11 h-11) to meet accessibility guidelines for mobile touch targets

3. UserInfoCard.tsx: Changed modal grid breakpoint from lg:grid-cols-2 to md:grid-cols-2 so the 2-column layout activates earlier on tablets

4. RecentOrders.tsx: Added flex-col sm:flex-row to button container so Filter/See All buttons stack vertically on mobile instead of causing horizontal overflow

5. index.css: Made FullCalendar min-width responsive (min-w-full sm:min-w-[718px]) to prevent forced horizontal scrolling on mobile

6. test_playwright.py: Added viewport tests for small phones (375x667), large phones (414x896), and tablets landscape (1024x768)

Review & Testing Checklist for Human

• Test sidebar toggle behavior at the 1024px breakpoint boundary - verify the matchMedia change doesn't break toggle functionality
• Open the User Profile modal on a tablet-sized viewport (768px-1024px) and verify the 2-column grid layout looks correct
• Check RecentOrders component on mobile (<640px) - buttons should stack vertically
• Navigate to Calendar page on mobile and verify no horizontal scrolling is required
• Verify the application menu button (three dots) in header has adequate touch target size on mobile

Recommended test plan: Run the app locally (npm run dev) and use browser DevTools to test at viewport widths: 375px, 414px, 768px, 1024px. Check each modified component at these breakpoints.

Notes

• All changes use existing Tailwind breakpoints (sm: 640px, md: 768px, lg: 1024px)
• Lint passes with only pre-existing warnings (no new issues)
• The Playwright test additions are screenshot-based and will help catch visual regressions in CI

Link to Devin run: https://app.devin.ai/sessions/00cebc5f90674310ba4779014121ed6a
Requested by: bobby.nobakht@codeium.com (@bnob-ship-it)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring