fix: improve thumbnail display in MusicPlayer with better styling and responsiveness

src/components/MusicPlayer.tsx

@@ -123,11 +123,11 @@ export function MusicPlayer() {
       <Card className="fixed bottom-4 right-4 w-80 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border shadow-lg z-50">
         {/* Thumbnail */}
         {currentTrack?.thumbnail && (
-          <div className="relative h-32 w-full overflow-hidden rounded-t-lg">
+          <div className="relative w-full overflow-hidden rounded-t-lg bg-muted/50 flex items-center justify-center">
             <img 
               src={currentTrack.thumbnail} 
               alt={currentTrack.title}
-              className="h-full w-full object-cover"
+              className="max-w-full max-h-45 object-contain"
             />
             <div className="absolute top-2 right-2 flex space-x-1">
               <Button
@@ -296,11 +296,11 @@ export function MusicPlayer() {
         <div className="flex-1 flex flex-col items-center justify-center p-8">
           {/* Large thumbnail */}
           {currentTrack?.thumbnail && (
-            <div className="w-80 h-80 rounded-lg overflow-hidden mb-6 shadow-lg">
+            <div className="max-w-full rounded-lg overflow-hidden mb-6 shadow-lg bg-muted/50 flex items-center justify-center">
               <img 
                 src={currentTrack.thumbnail} 
                 alt={currentTrack.title}
-                className="h-full w-full object-cover"
+                className="max-w-full max-h-full object-contain"
               />
             </div>
           )}