style: shrink the album cards

Fit one more column from the sm breakpoint up and tighten the caption
under the cover, so more of the library is visible at a glance without
the tiles feeling cramped. The skeleton follows the same measurements to
keep the grid from resizing as it loads.

Author: rohan-pandeyy

frontend/src/components/Albums/AlbumCard.tsx

@@ -89,15 +89,15 @@ export const AlbumCard: React.FC<AlbumCardProps> = ({
           </div>
         </div>
         {/* Album Info */}
-        <div className="space-y-1 p-4">
-          <h3 className="truncate text-base font-semibold">{album.name}</h3>
+        <div className="space-y-0.5 p-3">
+          <h3 className="truncate text-sm font-semibold">{album.name}</h3>
           {album.description && (
-            <p className="text-muted-foreground line-clamp-2 text-sm">
+            <p className="text-muted-foreground line-clamp-1 text-xs">
               {album.description}
             </p>
           )}
 
-          <p className="text-muted-foreground text-sm">
+          <p className="text-muted-foreground text-xs">
             {album.image_count} {album.image_count === 1 ? 'photo' : 'photos'}
           </p>
         </div>

frontend/src/pages/Album/Album.tsx

@@ -33,8 +33,8 @@ const ALBUM_SORT_OPTIONS: SortOption<AlbumSortValue>[] = [
 const AlbumCardSkeleton: React.FC = () => (
   <div className="animate-pulse" data-testid="album-card-skeleton">
     <div className="bg-muted aspect-4/5 w-full rounded-xl" />
-    <div className="space-y-2 p-4">
-      <div className="bg-muted h-4 w-2/3 rounded" />
+    <div className="space-y-1.5 p-3">
+      <div className="bg-muted h-3.5 w-2/3 rounded" />
       <div className="bg-muted h-3 w-1/3 rounded" />
     </div>
   </div>
@@ -190,15 +190,15 @@ function Albums() {
       </div>
       <div className="flex-1 overflow-y-auto">
         {isLoading ? (
-          <div className="grid grid-cols-2 gap-4 pb-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+          <div className="grid grid-cols-2 gap-4 pb-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
             {Array.from({ length: 10 }).map((_, index) => (
               <AlbumCardSkeleton key={index} />
             ))}
           </div>
         ) : albums.length === 0 ? (
           <EmptyAlbumsState />
         ) : (
-          <div className="grid grid-cols-2 gap-4 pb-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+          <div className="grid grid-cols-2 gap-4 pb-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
             {sortedAlbums.map((album) => (
               <AlbumCard
                 key={album.id}