Mobile-responsive UI for both app versions

[Copilot]

Static site with no mobile layout — sidebar, player, and content areas are unusable on small screens. Adds responsive behavior at 768px/640px breakpoints without altering desktop rendering.

home/ (multi-file version)

• Sidebar → drawer: Off-screen by default on mobile, slides in via hamburger button with backdrop overlay
• Bottom navigation: Fixed 5-tab bar (Home, Trending, Albums, Library, Search) replaces sidebar nav on mobile
• Mobile search bar: Inline search input at top of main content area, wired to same searchManager with shared _searchDropdown method
• Compact player: Height reduced to 56px, PiP and volume hidden, info island and album art scaled down
• Layout: Reduced padding (p-8 → p-4), album detail header stacks vertically, scroll cards shrink to 140px

Root index.html (single-file premium version)

• Header: top-4 left-6 right-6 px-6 py-3 → responsive with sm: variants
• Player card: h-[72px] → h-16 sm:h-[72px], play button w-12 → w-10 sm:w-12
• Queue: w-72 md:w-80 → w-56 sm:w-72 md:w-80, max-height 500px → 60vh
• Queue expand button: Always visible on mobile via max-sm:w-8 max-sm:opacity-100 (no hover on touch)
• Content padding: All px-8 section headings → px-4 sm:px-8, horizontal scroll padding reduced on small screens
• Blur edges: Width 32px → 16px and adjusted insets below 640px

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
medial-player	Ready	Preview, Comment	Mar 15, 2026 3:55pm