UI update on mobile devices

frontend/src/components/player/Player.tsx

@@ -262,16 +262,28 @@ export default function Player({
           <div className="flex items-center justify-between gap-2 md:gap-4">
             {/* Album art and music info */}
             <div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
-              {currentMusic.thumbnail && (
+              {currentMusic.thumbnail ? (
                 <img
                   src={currentMusic.thumbnail.startsWith('http') ? currentMusic.thumbnail : `/music/${currentMusic.thumbnail}`}
                   alt={currentMusic.title}
                   className="w-12 h-12 md:w-14 md:h-14 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
                   onClick={() => setShowFullScreen(true)}
                 />
+              ) : (
+                <div 
+                  className="w-12 h-12 md:w-14 md:h-14 rounded bg-secondary flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
+                  onClick={() => setShowFullScreen(true)}
+                >
+                  <Play className="h-6 w-6 md:h-7 md:w-7 text-muted-foreground" />
+                </div>
               )}
               <div className="flex-1 min-w-0">
-                <h3 className="font-semibold truncate">{currentMusic.title}</h3>
+                <h3 
+                  className="font-semibold truncate cursor-pointer hover:underline"
+                  onClick={() => setShowFullScreen(true)}
+                >
+                  {currentMusic.title}
+                </h3>
                 {currentMusic.artist && currentMusic.artist !== 'Unknown' ? (
                   <button
                     onClick={() => navigate(`/artists/${encodeURIComponent(currentMusic.artist!)}`)}