From 9a8a5fb1ee1cd18531045a6719156c1a06b3cde1 Mon Sep 17 00:00:00 2001
From: Ben Dichter <ben.dichter@gmail.com>
Date: Tue, 30 Jun 2026 17:24:53 -0400
Subject: [PATCH] Fix squished banners in Recent News thumbnails

The Recent News sidebar thumbnails set a fixed 90x70 box with no
object-fit, so wide banner images were distorted. Add object-fit: cover
so thumbnails crop to fill the box while preserving aspect ratio.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 layouts/news/list.html   | 2 +-
 layouts/news/single.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/news/list.html b/layouts/news/list.html
index 4ac21a9..3f8f0b8 100644
--- a/layouts/news/list.html
+++ b/layouts/news/list.html
@@ -119,7 +119,7 @@ <h4 class="inter-600 text-24 dark-900">Recent News</h4>
                         <div class="rounded-3 shadow-sm bg-white p-2">
                             <div class="d-flex  gap-3 align-items-center">
                                 <div>
-                                    <img src="{{ .Params.image }}" alt="" width="90" height="70" class="rounded-3">
+                                    <img src="{{ .Params.image }}" alt="" width="90" height="70" class="rounded-3" style="object-fit: cover;">
                                 </div>
                                 <div class="w-100 d-flex flex-column row-gap-1">
                                     <div class="d-flex align-items-sm-center gap-1">
diff --git a/layouts/news/single.html b/layouts/news/single.html
index d50450a..261a1d5 100644
--- a/layouts/news/single.html
+++ b/layouts/news/single.html
@@ -139,7 +139,7 @@ <h4 class="inter-600 text-24 dark-900">Recent News</h4>
                             <div class="d-flex  gap-3 align-items-center">
                                 <div>
                                     <img data-pagefind-meta="image[src]" src="{{ .Params.image }}" alt="" width="90"
-                                        height="70" class="rounded-3">
+                                        height="70" class="rounded-3" style="object-fit: cover;">
                                 </div>
                                 <div class="w-100 d-flex flex-column row-gap-1">
                                     <div class="d-flex align-items-sm-center gap-1">