Make Vue-based Admin interface mobile-friendly with responsive sidebar and layouts

[Copilot]

The Vue-based Admin interface at /app/admin was not mobile-friendly, making it difficult to use on smartphones and tablets. This PR implements comprehensive mobile responsiveness while maintaining the full desktop experience.

Changes Made

🔧 Responsive Sidebar Navigation

• Desktop: Maintains existing fixed sidebar (20% width) with persistent navigation
• Mobile: Transforms into a hidden sidebar with hamburger menu trigger
• Mobile Overlay: Full-screen sidebar overlay with backdrop and smooth CSS transitions
• Added Alpine.js state management for sidebar toggle functionality

📱 Mobile-First Layout Updates

• Content Padding: Reduced from px-12 py-24 to px-4 py-16 on mobile devices
• Header Layouts: Buttons stack vertically on mobile, remain horizontal on desktop
• Filter Controls: Search and select inputs stack vertically on mobile for better usability

🎨 Enhanced Vue Components

AdminSources.vue:

• Mobile-optimized source cards with action buttons moved to top on mobile
• Responsive modal dialogs with mobile-friendly close buttons
• Form layouts adapt to mobile with stacked inputs
• Long URLs properly break to prevent horizontal overflow

AdminCategories.vue:

• Dual layout system: Table view on desktop, card view on mobile
• Mobile-optimized modal dialogs with better touch targets
• Responsive button layouts and consistent spacing

🎯 Technical Implementation

• Uses existing md: 600px breakpoint from Tailwind configuration
• Leverages existing Alpine.js for state management (no new dependencies)
• Fully backward compatible - desktop experience unchanged
• CSS-only responsive implementation for optimal performance

Screenshots

Desktop View (600px+):

Mobile View (375px) - Menu Closed:

Mobile View - Menu Open:

The admin interface now provides an excellent mobile experience with intuitive navigation, properly sized touch targets, and optimized layouts for small screens while preserving all desktop functionality.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.