chore: update Tailwind CSS from 3.4.15, to 4.1.11

- Changed the PostCSS configuration to use '@tailwindcss/postcss' instead of 'tailwindcss'.
- Deleted the Tailwind configuration file as it is no longer needed.

app/browse/page.tsx

@@ -94,7 +94,7 @@ export default function BrowsePage() {
     <div className="h-full px-4 py-6 lg:px-8">
     <>
       <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none flex flex-col flex-grow">
+        <TabsContent value="music" className="border-none p-0 outline-hidden flex flex-col grow">
         
         <div className="flex items-center justify-between">
             <div className="space-y-1">
@@ -111,7 +111,7 @@ export default function BrowsePage() {
             </Button>
           </div>
           <Separator className="my-4" />
-          <div className="relative flex-grow">
+          <div className="relative grow">
             <div className="relative">
             <ScrollArea>
             <div className="flex space-x-4 pb-4">
@@ -119,7 +119,7 @@ export default function BrowsePage() {
                   <ArtistIcon
                     key={artist.id}
                     artist={artist}
-                    className="flex-shrink-0 overflow-hidden"
+                    className="shrink-0 overflow-hidden"
                     size={190}
                   />
                 ))}
@@ -139,7 +139,7 @@ export default function BrowsePage() {
             </div>
           </div>
           <Separator className="my-4" />
-          <div className="relative flex-grow">
+          <div className="relative grow">
             <ScrollArea className="h-full">
               <div className="h-full overflow-y-auto">
                 <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 p-4 pb-8">

app/components/AudioPlayer.tsx

@@ -359,7 +359,7 @@ export const AudioPlayer: React.FC = () => {
     return (
       <div className="fixed bottom-4 left-4 z-50">
         <div 
-          className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg cursor-pointer hover:scale-[1.02] transition-transform w-80"
+          className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg cursor-pointer hover:scale-[1.02] transition-transform w-80"
           onClick={() => setIsMinimized(false)}
         >
           <div className="flex items-center p-3">
@@ -368,7 +368,7 @@ export const AudioPlayer: React.FC = () => {
               alt={currentTrack.name} 
               width={40} 
               height={40} 
-              className="w-10 h-10 rounded-md flex-shrink-0" 
+              className="w-10 h-10 rounded-md shrink-0" 
             />
             <div className="flex-1 min-w-0 mx-3">
               <div className="overflow-hidden">
@@ -413,7 +413,7 @@ export const AudioPlayer: React.FC = () => {
   // Compact floating player (default state)
   return (
     <div className="fixed bottom-4 left-4 right-4 z-50">
-      <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-3 cursor-pointer hover:scale-[1.01] transition-transform">
+      <div className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg p-3 cursor-pointer hover:scale-[1.01] transition-transform">
         <div className="flex items-center">
           {/* Track info */}
           <div className="flex items-center flex-1 min-w-0">
@@ -422,7 +422,7 @@ export const AudioPlayer: React.FC = () => {
               alt={currentTrack.name} 
               width={48} 
               height={48} 
-              className="w-12 h-12 rounded-md mr-4 flex-shrink-0" 
+              className="w-12 h-12 rounded-md mr-4 shrink-0" 
             />
             <div className="flex-1 min-w-0">
               <p className="font-semibold truncate text-base">{currentTrack.name}</p>

app/components/FullScreenPlayer.tsx

@@ -296,7 +296,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
       <div className="absolute inset-0 bg-black/50" />
         <div className="relative h-full w-full flex flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between p-4 lg:p-6 flex-shrink-0">
+        <div className="flex items-center justify-between p-4 lg:p-6 shrink-0">
           <h2 className="text-lg lg:text-xl font-semibold text-white"></h2>
           <div className="flex items-center gap-2">
             {onOpenQueue && (
@@ -323,7 +323,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
           {/* Left Side - Album Art and Controls */}
           <div className="flex flex-col items-center justify-center min-h-0 flex-1 min-w-0">
             {/* Album Art */}
-            <div className="relative mb-4 lg:mb-6 flex-shrink-0">
+            <div className="relative mb-4 lg:mb-6 shrink-0">
               <Image
                 src={currentTrack.coverArt || '/default-album.png'}
                 alt={currentTrack.album}
@@ -335,7 +335,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             </div>
 
             {/* Track Info */}
-            <div className="text-center mb-4 lg:mb-6 px-4 flex-shrink-0 max-w-full">
+            <div className="text-center mb-4 lg:mb-6 px-4 shrink-0 max-w-full">
               <h1 className="text-lg sm:text-xl lg:text-3xl font-bold text-foreground mb-2 line-clamp-2 leading-tight">
                 {currentTrack.name}
               </h1>
@@ -348,7 +348,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             </div>
 
             {/* Progress */}
-            <div className="w-full max-w-sm lg:max-w-md mb-4 lg:mb-6 px-4 flex-shrink-0">
+            <div className="w-full max-w-sm lg:max-w-md mb-4 lg:mb-6 px-4 shrink-0">
               <div className="w-full" onClick={handleSeek}>
                 <Progress value={progress} className="h-2 cursor-pointer" />
               </div>
@@ -359,7 +359,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             </div>
 
             {/* Controls */}
-            <div className="flex items-center gap-3 sm:gap-4 lg:gap-6 mb-4 lg:mb-6 flex-shrink-0">
+            <div className="flex items-center gap-3 sm:gap-4 lg:gap-6 mb-4 lg:mb-6 shrink-0">
               <button
                 onClick={toggleShuffle}
                 className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
@@ -407,7 +407,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             </div>
 
             {/* Volume and Lyrics Toggle */}
-            <div className="flex items-center gap-3 flex-shrink-0 justify-center">
+            <div className="flex items-center gap-3 shrink-0 justify-center">
               <button
                 onMouseEnter={() => setShowVolumeSlider(true)}
                 className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">

app/components/PopularSongs.tsx

@@ -92,7 +92,7 @@ export function PopularSongs({ songs, artistName }: PopularSongsProps) {
             </div>
 
             {/* Album Art */}
-            <div className="relative w-12 h-12 bg-muted rounded-md overflow-hidden flex-shrink-0">
+            <div className="relative w-12 h-12 bg-muted rounded-md overflow-hidden shrink-0">
               {song.coverArt && api && (
                 <Image
                   src={api.getCoverArtUrl(song.coverArt, 96)}

app/components/SimilarArtists.tsx

@@ -68,7 +68,7 @@ export function SimilarArtists({ artistName }: SimilarArtistsProps) {
             <Link
               key={artist.name}
               href={`/artist/${encodeURIComponent(artist.name)}`}
-              className="flex-shrink-0"
+              className="shrink-0"
             >
               <div className="w-32 space-y-2 group cursor-pointer">
                 <div className="relative w-32 h-32 bg-muted rounded-full overflow-hidden">

app/components/WhatsNewPopup.tsx

@@ -170,14 +170,14 @@ export function WhatsNewPopup() {
         <>
         <div className="flex gap-2 mb-4">
           <Button
-            variant={tab === 'latest' ? 'default' : 'outline'}
+            variant={tab === 'latest' ? 'default' : 'outline-solid'}
             size="sm"
             onClick={() => setTab('latest')}
           >
             Latest
           </Button>
           <Button
-            variant={tab === 'archive' ? 'default' : 'outline'}
+            variant={tab === 'archive' ? 'default' : 'outline-solid'}
             size="sm"
             onClick={() => setTab('archive')}
             disabled={archiveChangelogs.length === 0}

app/components/album-artwork.tsx

@@ -148,7 +148,7 @@ export function AlbumArtwork({
               
               className={cn(
                 "w-full h-full object-cover transition-all hover:scale-105",
-                aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-square"
+                aspectRatio === "portrait" ? "aspect-3/4" : "aspect-square"
               )}
             />
           </div> */}

app/components/artist-icon.tsx

@@ -63,7 +63,7 @@ export function ArtistIcon({
   if (imageOnly) {
     return (
       <div 
-        className={cn("overflow-hidden rounded-full cursor-pointer flex-shrink-0", className)} 
+        className={cn("overflow-hidden rounded-full cursor-pointer shrink-0", className)} 
         onClick={handleClick}
         style={{ width: size, height: size }}
         {...props}
@@ -106,7 +106,7 @@ export function ArtistIcon({
             </CardContent>
           </Card>
           {/* <div 
-            className="overflow-hidden rounded-full cursor-pointer flex-shrink-0" 
+            className="overflow-hidden rounded-full cursor-pointer shrink-0" 
             onClick={handleClick}
             style={{ width: size, height: size }}
           >

app/components/ihateserverside.tsx

@@ -62,7 +62,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
 
         {/* Main Content Area */}
         <div className="flex-1 flex overflow-hidden">
-          <div className="w-64 flex-shrink-0 border-r transition-all duration-200">
+          <div className="w-64 shrink-0 border-r transition-all duration-200">
             <Sidebar
               playlists={playlists}
               className="h-full overflow-y-auto"
@@ -103,7 +103,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
       {/* Main Content Area */}
       <div className="flex-1 flex overflow-hidden">
         {isSidebarVisible && (
-          <div className={`${isSidebarCollapsed ? 'w-16' : 'w-64'} flex-shrink-0 border-r transition-all duration-200`}>
+          <div className={`${isSidebarCollapsed ? 'w-16' : 'w-64'} shrink-0 border-r transition-all duration-200`}>
             <Sidebar
               playlists={playlists}
               className="h-full overflow-y-auto"

app/favorites/page.tsx

@@ -217,7 +217,7 @@ const FavoritesPage = () => {
                     <div className="w-8 text-sm text-muted-foreground text-center">
                       {index + 1}
                     </div>
-                    <div className="w-12 h-12 relative flex-shrink-0">
+                    <div className="w-12 h-12 relative shrink-0">
                       {song.coverArt && api ? (
                         <Image
                           src={api.getCoverArtUrl(song.coverArt)}

app/globals.css

@@ -1,41 +1,103 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
+@custom-variant dark (@media (prefers-color-scheme: dark));
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-hover: hsl(var(--hover));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility text-balance {
+  text-wrap: balance;
+}
+
+@utility animate-scroll {
+  animation: scroll 8s linear infinite;
+}
+
+@utility animate-infinite-scroll {
+  animation: infiniteScroll 10s linear infinite;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-  
-  .animate-scroll {
-    animation: scroll 8s linear infinite;
-  }
-  
-  .animate-infinite-scroll {
-    animation: infiniteScroll 10s linear infinite;
+  body {
+    font-family: Arial, Helvetica, sans-serif;
   }
 }
 
-@keyframes scroll {
-  0%, 20% {
-    transform: translateX(0);
+@layer utilities {
+  @keyframes scroll {
+    0%,
+    20% {
+      transform: translateX(0);
+    }
+    80%,
+    100% {
+      transform: translateX(-100%);
+    }
   }
-  80%, 100% {
-    transform: translateX(-100%);
-  }
-}
 
-@keyframes infiniteScroll {
-  0% {
-    transform: translateX(15%);
-  }
-  100% {
-    transform: translateX(-215%);
+  @keyframes infiniteScroll {
+    0% {
+      transform: translateX(15%);
+    }
+    100% {
+      transform: translateX(-215%);
+    }
   }
 }
 
@@ -263,7 +325,8 @@ body {
 
 
 
-/* BackUp */
+@layer utilities {
+  /* BackUp */
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
@@ -293,18 +356,19 @@ body {
     --radius: 0.5rem;
   }
 
+  :focus-visible {
+    outline-color: rgb(59, 130, 246);
+  }
+  ::selection {
+    background-color: rgb(59, 130, 246);
+  }
+  ::marker {
+    color: rgb(59, 130, 246);
+  }
 
-
-
-
-:focus-visible { outline-color: rgb(59, 130, 246); }
-::selection { background-color: rgb(59, 130, 246); }
-::marker { color: rgb(59, 130, 246); }
-
-
-
-::selection {
-  background: var(--primary);
+  ::selection {
+    background: var(--primary);
+  }
 }
 
 @layer base {

app/history/page.tsx

@@ -79,7 +79,7 @@ export default function HistoryPage() {
   return (
     <div className="h-full px-4 py-6 lg:px-8">
       <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
+        <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <div className="flex items-center gap-2">
@@ -155,7 +155,7 @@ export default function HistoryPage() {
                             </div>
 
                             {/* Album Art */}
-                            <div className="w-12 h-12 mr-4 flex-shrink-0">
+                            <div className="w-12 h-12 mr-4 shrink-0">
                               <Image
                                 src={track.coverArt || '/default-user.jpg'}
                                 alt={track.album}

app/library/albums/page.tsx

@@ -109,7 +109,7 @@ export default function AlbumsPage() {
   return (
     <div className="h-full px-4 py-6 lg:px-8">
       <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none flex flex-col flex-grow">
+        <TabsContent value="music" className="border-none p-0 outline-hidden flex flex-col grow">
           <div className="flex items-center justify-between mb-4">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
@@ -150,7 +150,7 @@ export default function AlbumsPage() {
 
           <Separator className="my-4" />
           
-          <div className="relative flex-grow">
+          <div className="relative grow">
             <ScrollArea className="h-full">
               <div className="h-full overflow-y-auto">
                 <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 p-4 pb-8">

app/library/artists/page.tsx

@@ -67,7 +67,7 @@ export default function ArtistPage() {
   return (
     <div className="h-full px-4 py-6 lg:px-8 mb-24">
       <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
+        <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">

app/library/playlists/page.tsx

@@ -33,7 +33,7 @@ const PlaylistsPage: React.FC = () => {
   return (
     <div className="h-full px-4 py-6 lg:px-8">
       <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
+        <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
@@ -60,7 +60,7 @@ const PlaylistsPage: React.FC = () => {
                     <Link key={playlist.id} href={`/playlist/${playlist.id}`}>
                       <div className="p-4 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer h-32">
                         <div className="flex items-center space-x-4 h-full">
-                          <div className="w-12 h-12 bg-muted rounded-md overflow-hidden flex-shrink-0">
+                          <div className="w-12 h-12 bg-muted rounded-md overflow-hidden shrink-0">
                             <Image
                               src={playlistCoverUrl}
                               alt={playlist.name}

app/library/songs/page.tsx

@@ -239,7 +239,7 @@ export default function SongsPage() {
                   </div>
 
                   {/* Album Art */}
-                  <div className="w-12 h-12 mr-4 flex-shrink-0">                    <Image
+                  <div className="w-12 h-12 mr-4 shrink-0">                    <Image
                       src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 100) : '/default-user.jpg'}
                       alt={song.album}
                       width={48}

app/page.tsx

@@ -185,7 +185,7 @@ export default function MusicPage() {
       <div className="relative rounded-lg p-8">
           <div className="relative rounded-sm p-10">
             <div
-              className="absolute inset-0 bg-center bg-cover bg-no-repeat blur-xl bg-gradient-to-r from-primary to-secondary"
+              className="absolute inset-0 bg-center bg-cover bg-no-repeat blur-xl bg-linear-to-r from-primary to-secondary"
  style={{
                 backgroundImage:
  timeOfDay === 'morning'
@@ -203,7 +203,7 @@ export default function MusicPage() {
        </div>
       <>
       <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
+        <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
@@ -221,14 +221,14 @@ export default function MusicPage() {
                 {isLoading ? (
                   // Loading skeletons
                   Array.from({ length: 10 }).map((_, i) => (
-                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md flex-shrink-0" />
+                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md shrink-0" />
                   ))
                 ) : (
                   recentAlbums.map((album) => (
                     <AlbumArtwork
                       key={album.id}
                       album={album}
-                      className="w-[220px] flex-shrink-0"
+                      className="w-[220px] shrink-0"
                       aspectRatio="square"
                       width={220}
                       height={220}
@@ -258,14 +258,14 @@ export default function MusicPage() {
                     {favoritesLoading ? (
                       // Loading skeletons
                       Array.from({ length: 10 }).map((_, i) => (
-                        <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md flex-shrink-0" />
+                        <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md shrink-0" />
                       ))
                     ) : (
                       favoriteAlbums.map((album) => (
                         <AlbumArtwork
                           key={album.id}
                           album={album}
-                          className="w-[220px] flex-shrink-0"
+                          className="w-[220px] shrink-0"
                           aspectRatio="square"
                           width={220}
                           height={220}
@@ -294,14 +294,14 @@ export default function MusicPage() {
             {isLoading ? (
                   // Loading skeletons
                   Array.from({ length: 10 }).map((_, i) => (
-                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md flex-shrink-0" />
+                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md shrink-0" />
                   ))
                 ) : (
                   newestAlbums.map((album) => (
                     <AlbumArtwork
                       key={album.id}
                       album={album}
-                      className="w-[220px] flex-shrink-0"
+                      className="w-[220px] shrink-0"
                       aspectRatio="square"
                       width={220}
                       height={220}

app/playlist/[id]/page.tsx

@@ -208,7 +208,7 @@ export default function PlaylistPage() {
                     </div>
 
                     {/* Album Art */}
-                    <div className="w-12 h-12 mr-4 flex-shrink-0">                      <Image
+                    <div className="w-12 h-12 mr-4 shrink-0">                      <Image
                         src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 100) : '/default-user.jpg'}
                         alt={song.album}
                         width={48}

app/queue/page.tsx

@@ -49,7 +49,7 @@ const QueuePage: React.FC = () => {
             <div className="p-4 bg-accent/30 rounded-lg">
               <div className="flex items-center">
                 {/* Album Art */}
-                <div className="w-16 h-16 mr-4 flex-shrink-0">
+                <div className="w-16 h-16 mr-4 shrink-0">
                   <Image
                     src={currentTrack.coverArt || '/default-user.jpg'}
                     alt={currentTrack.album}
@@ -115,7 +115,7 @@ const QueuePage: React.FC = () => {
                     onClick={() => skipToTrackInQueue(index)}
                   >
                     {/* Album Art with Play Indicator */}
-                    <div className="w-12 h-12 mr-4 flex-shrink-0 relative">
+                    <div className="w-12 h-12 mr-4 shrink-0 relative">
                       <Image
                         src={track.coverArt || '/default-user.jpg'}
                         alt={track.album}

app/search/page.tsx

@@ -142,7 +142,7 @@ export default function SearchPage() {
                 <ScrollArea className="w-full">
                   <div className="flex space-x-4 pb-4">
                     {searchResults.artists.map((artist) => (
-                      <ArtistIcon key={artist.id} artist={artist} className="flex-shrink-0" />
+                      <ArtistIcon key={artist.id} artist={artist} className="shrink-0" />
                     ))}
                   </div>
                   <ScrollBar orientation="horizontal" />
@@ -160,7 +160,7 @@ export default function SearchPage() {
                       <AlbumArtwork 
                         key={album.id} 
                         album={album} 
-                        className="flex-shrink-0 w-48" 
+                        className="shrink-0 w-48" 
                         aspectRatio="square"
                         width={192}
                         height={192}
@@ -192,7 +192,7 @@ export default function SearchPage() {
                       </div>
                       
                       {/* Song Cover */}
-                      <div className="flex-shrink-0">                        <Image
+                      <div className="shrink-0">                        <Image
                           src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 64) : '/default-user.jpg'}
                           alt={song.album}
                           width={48}