Fix Discover: auto-scroll to results, improve mobile layout

frontend/src/components/Layout.tsx

@@ -153,7 +153,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       </nav>
 
       {/* Main Content */}
-      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+      <main className="max-w-6xl mx-auto px-3 sm:px-6 py-4 sm:py-8">
         {children}
       </main>
     </div>

frontend/src/pages/Discover.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Compass, Sparkles, Loader2, ListMusic, Search, Users, Clock, Disc3, TrendingUp } from 'lucide-react'
 import { useAuth } from '../lib/auth'
@@ -39,6 +39,7 @@ export default function Discover() {
   const [adventurousness, setAdventurousness] = useState(3)
   const [excludeGenres, setExcludeGenres] = useState('')
   const [count, setCount] = useState(5)
+  const resultsRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const load = async () => {
@@ -74,9 +75,13 @@ export default function Discover() {
         excludeGenres.trim() || undefined,
         count,
       )
-      console.log('Discover response:', response)
-      setResults(response.recommendations || [])
+      const recs = response.recommendations || []
+      setResults(recs)
       setRemaining(response.remaining_this_week ?? null)
+      // Scroll to results after render
+      if (recs.length > 0) {
+        setTimeout(() => resultsRef.current?.scrollIntoView({ behavior: 'smooth' }), 100)
+      }
     } catch (err: any) {
       setError(
         err.response?.data?.detail || 'Failed to generate recommendations. Please try again.'
@@ -135,7 +140,7 @@ export default function Discover() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold text-charcoal flex items-center gap-3">
+        <h1 className="text-2xl sm:text-3xl font-bold text-charcoal flex items-center gap-3">
           <Compass className="w-8 h-8 text-purple" />
           Discover
         </h1>
@@ -150,7 +155,7 @@ export default function Discover() {
           <button
             key={id}
             onClick={() => setMode(id)}
-            className={`inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-medium transition-all cursor-pointer border ${
+            className={`inline-flex items-center gap-1.5 px-3 py-2 sm:px-4 sm:py-2.5 rounded-full text-xs sm:text-sm font-medium transition-all cursor-pointer border ${
               mode === id
                 ? 'bg-purple text-white border-purple shadow-md shadow-purple/20'
                 : 'bg-white text-charcoal-muted border-purple-100 hover:border-purple/30 hover:text-charcoal'
@@ -164,7 +169,7 @@ export default function Discover() {
       </div>
 
       {/* Discovery Form */}
-      <div className="bg-white rounded-2xl border border-purple-100 p-6 space-y-5">
+      <div className="bg-white rounded-2xl border border-purple-100 p-4 sm:p-6 space-y-4 sm:space-y-5">
         {/* Playlist Selector */}
         <div>
           <label className="block text-sm font-medium text-charcoal mb-2">
@@ -298,7 +303,7 @@ export default function Discover() {
 
       {/* Results */}
       {results.length > 0 && (
-        <div>
+        <div ref={resultsRef}>
           <h2 className="text-lg font-semibold text-charcoal mb-4">
             Your Recommendations ({results.length})
           </h2>