Change feed to vertical list with horizontal cards

- Replaced multi-column grid with single vertical list (flex-direction:column)
- Each item is a horizontal card: cover (100px) on the left, details on the right
- Newest first (DESC order with NULLS LAST)

src/main/resources/templates/fragments/feed-entries.html

@@ -8,36 +8,36 @@
   <p style="font-size:0.875rem;color:var(--bc);opacity:0.4;margin-top:0.25rem">Add artists to your collection to see their releases here</p>
 </div>
 {#else}
-<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem">
+<div style="display:flex;flex-direction:column;gap:0.75rem">
   {#for entry in entries}
   <a href="https://musicbrainz.org/release-group/{entry.mbid}"
      target="_blank" rel="noopener noreferrer"
-     class="bg-base-100 shadow-md rounded-box border border-base-300 overflow-hidden"
+     class="bg-base-100 shadow-sm rounded-box border border-base-300 overflow-hidden"
-     style="text-decoration:none;transition:transform 0.15s,box-shadow 0.15s;display:flex;flex-direction:column"
+     style="display:flex;text-decoration:none;transition:box-shadow 0.15s"
-     onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.2)'"
+     onmouseover="this.style.boxShadow='0 2px 8px rgba(0,0,0,0.12)'"
-     onmouseout="this.style.transform='';this.style.boxShadow=''">
+     onmouseout="this.style.boxShadow=''">
-    <div style="aspect-ratio:1;overflow:hidden;background:var(--b2)">
+    <div style="width:100px;min-height:100px;flex-shrink:0;background:var(--b2);overflow:hidden">
       <img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
            alt="Cover for {entry.title}"
            style="width:100%;height:100%;object-fit:cover;display:block"
            loading="lazy"
-           onerror="this.parentElement.innerHTML='<div style=\'display:flex;align-items:center;justify-content:center;height:100%;color:var(--bc);opacity:0.15\'><svg width=\'48\' height=\'48\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'1.5\'><circle cx=\'6\' cy=\'18\' r=\'3\'/><circle cx=\'18\' cy=\'16\' r=\'3\'/><path d=\'M9 18V5l12-2v13\'/><path d=\'M9 9l12-2\'/></svg></div>'">
+           onerror="this.parentElement.innerHTML='<div style=\'display:flex;align-items:center;justify-content:center;height:100%;min-height:100px;color:var(--bc);opacity:0.12\'><svg width=\'36\' height=\'36\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'1.5\'><circle cx=\'6\' cy=\'18\' r=\'3\'/><circle cx=\'18\' cy=\'16\' r=\'3\'/><path d=\'M9 18V5l12-2v13\'/><path d=\'M9 9l12-2\'/></svg></div>'">
     </div>
-    <div style="padding:0.65rem 0.75rem;flex:1;display:flex;flex-direction:column;gap:0.2rem">
+    <div style="padding:0.75rem 1rem;flex:1;display:flex;flex-direction:column;justify-content:center;gap:0.15rem">
-      <div style="font-size:0.75rem;font-weight:500;color:var(--bc);opacity:0.55;text-transform:uppercase;letter-spacing:0.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{entry.artistName}</div>
+      <div style="font-size:0.8rem;font-weight:600;color:var(--bc);opacity:0.55;text-transform:uppercase;letter-spacing:0.04em">{entry.artistName}</div>
-      <div style="font-size:0.85rem;font-weight:600;color:var(--bc);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3">{entry.title}</div>
+      <div style="font-size:1rem;font-weight:600;color:var(--bc);line-height:1.3">{entry.title}</div>
-      <div style="margin-top:auto;padding-top:0.35rem;display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap">
+      <div style="margin-top:0.25rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap">
         {#if entry.primaryType == 'Album'}
-          <span class="badge badge-primary badge-xs">Album</span>
+          <span class="badge badge-primary badge-sm">Album</span>
         {#else if entry.primaryType == 'Single'}
-          <span class="badge badge-secondary badge-xs">Single</span>
+          <span class="badge badge-secondary badge-sm">Single</span>
         {#else if entry.primaryType == 'EP'}
-          <span class="badge badge-accent badge-xs">EP</span>
+          <span class="badge badge-accent badge-sm">EP</span>
         {#else}
-          <span class="badge badge-ghost badge-xs">{entry.primaryType}</span>
+          <span class="badge badge-ghost badge-sm">{entry.primaryType}</span>
         {/if}
         {#if entry.firstReleaseDate}
-          <span style="font-size:0.7rem;color:var(--bc);opacity:0.45">{entry.firstReleaseDate}</span>
+          <span style="font-size:0.75rem;color:var(--bc);opacity:0.45">{entry.firstReleaseDate}</span>
         {/if}
       </div>
     </div>