feat: Implement comprehensive mobile responsiveness across all pages

[androemeda]

Summary

This PR implements comprehensive mobile responsiveness across the entire VCell-AI application, making it fully functional and user-friendly on mobile devices. The changes focus on mobile-first design principles, proper navigation, and responsive layouts.

---

Implementation Details

Key Changes

• Mobile Headers: Added mobile-specific headers with hamburger menu for sidebar navigation on all pages
• Responsive Layouts: Implemented responsive flex layouts using Tailwind CSS breakpoints (sm:, md:)
• Button Optimization: Fixed button overflow issues and implemented proper text stacking on mobile
• Modal Improvements: Fixed modal sizing and alignment for mobile screens
• Sidebar Integration: Added useSidebar hook integration for consistent mobile navigation
• Image Optimization: Properly sized VCell logo across different screen sizes
• Typography Scaling: Implemented responsive text sizing for better mobile readability

---

Technical Approach

• Mobile-first responsive design using Tailwind CSS
• Conditional rendering with {isMobile && ...} for mobile-specific components
• Responsive breakpoints:
  • sm: (640px+)
  • md: (768px+)
• Consistent component patterns across all pages
• Flexbox layouts with responsive direction changes (flex-col sm:flex-row)

---

Pages Updated

1. Landing Page (/)
2. Chat Page (/chat)
3. Search Results (/search/[bmid])
4. Analysis Results (/analyze/[id])
5. Admin Dashboard (/admin)
6. Admin Settings (/admin/settings)
7. Knowledge Base (/admin/knowledge-base)

---

Screenshots

Landing Page (/)

Before	After

---

Chat Page (/chat)

Before	After

---

Search Details (/search/[bmid])

Before	After

---

Analysis Results (/analyze/[id])

Before	After

---

Admin Pages (/admin)

Before	After

---

Admin Pages (/admin/settings)

Before	After

---

Admin Pages (/admin/knowledge-base)

Before	After

---

Testing

• Tested on multiple mobile screen sizes
• Verified sidebar functionality across all pages
• Confirmed button accessibility and readability
• Validated responsive behavior across breakpoints

---

Technical Notes

• Maintains full backward compatibility with desktop layouts
• Uses existing UI components and design system
• Implements a consistent mobile header pattern across all pages
• Includes proper handling for responsive states and image loading