fix(web): cap the article grid at 5 columns, show the year on old dates

The grid adds columns as long as 20rem fits; on wide screens that meant
6+ cards per row. The column minimum now grows with the width once 5
columns fit, so a 6th never appears.

Dates outside the current year now show the year: a feed item dated
2027 was displayed as "5 oct." and looked like an old article stuck on
top of the list.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fc1UFpB4V1MGWLxHAu3BMK

web/src/index.css

@@ -113,11 +113,17 @@
   text-wrap: pretty;
 }
 
-/* Article grid: as many ~20rem columns as the width allows. */
+/* Article grid: as many ~20rem columns as the width allows, capped at 5.
+   The column minimum grows with the width once 5 columns fit, so a 6th
+   never appears. */
 @utility article-grid {
+  --grid-gap: 1.5rem;
   display: grid;
-  gap: 1.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+  gap: var(--grid-gap);
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(100%, max(20rem, (100% - 4 * var(--grid-gap)) / 5 - 1px)), 1fr)
+  );
 }
 
 /* Skip rendering work for off-screen cards in long lists. */

web/src/lib/format.ts

@@ -1,10 +1,16 @@
 // Formatters are built once: constructing Intl objects per render is costly in long lists.
 const shortDate = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
+const shortDateYear = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
+
+/** Short date, with the year when it isn't the current one. */
+function shortWithYear(d: Date) {
+    return d.getFullYear() === new Date().getFullYear() ? shortDate.format(d) : shortDateYear.format(d);
+}
 const longDate = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
 const relative = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
 
 export function formatShort(iso?: string) {
-    return iso ? shortDate.format(new Date(iso)) : '';
+    return iso ? shortWithYear(new Date(iso)) : '';
 }
 
 export function formatLong(iso?: string) {
@@ -20,7 +26,7 @@ export function formatRelative(iso?: string) {
     if (abs < 3600) return relative.format(Math.round(diff / 60), 'minute');
     if (abs < 86400) return relative.format(Math.round(diff / 3600), 'hour');
     if (abs < 7 * 86400) return relative.format(Math.round(diff / 86400), 'day');
-    return shortDate.format(new Date(iso));
+    return shortWithYear(new Date(iso));
 }
 
 export function readingTimeLabel(minutes?: number) {