From 87e42abe6957183d29bec7eee7cdb07116296e1a Mon Sep 17 00:00:00 2001
From: ssavutu <ssavutu@gmail.com>
Date: Thu, 3 Sep 2026 23:57:13 -0400
Subject: [PATCH] Stop the listing thumbnails collapsing to a sliver

Tailwind's preflight puts max-width:100% on every img, so the thumbnail's
min-content width is zero. Auto table layout takes the space it needs from
whichever column will yield, and that is the only one that will: under pressure
the column shrinks to a few pixels and h-10 holds the height, leaving a tall
4px sliver of cropped photo where a 48x40 thumbnail should be.

It has presumably always been one badge away from happening. Adding the
Featured badge is what spent the remaining slack, so rows carrying both badges
squeeze the column for the whole table, including rows that carry neither.

w-12 is a preference here, not a floor; min-w-[3rem] is the floor. The
placeholder for an article with no image never had the problem, since a div's
fixed width already is its min-content width.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L4qBhBdQto1yNp1zP7VLYc
---
 frontend/src/pages/articleView.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/articleView.tsx b/frontend/src/pages/articleView.tsx
index 71e36ed..9044699 100644
--- a/frontend/src/pages/articleView.tsx
+++ b/frontend/src/pages/articleView.tsx
@@ -850,7 +850,8 @@ function ArticleView({ pageTitle = "Articles", fixedType, excludeType }: Article
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-border bg-muted/40">
-              <th className="w-16 px-3 py-3" scope="col" aria-label="Featured image" />
+              {/* min-w as well as w: see the thumbnail cell below. */}
+              <th className="w-16 min-w-[4rem] px-3 py-3" scope="col" aria-label="Featured image" />
               <th className="text-left px-4 py-3 font-semibold text-muted-foreground" scope="col">Title</th>
               <th className="text-left px-4 py-3 font-semibold text-muted-foreground" scope="col">Authors</th>
               <th className="text-left px-4 py-3 font-semibold text-muted-foreground" scope="col">Status</th>
@@ -882,9 +883,16 @@ function ArticleView({ pageTitle = "Articles", fixedType, excludeType }: Article
                 <tr key={item.id} className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors">
                   <td className="px-3 py-2 w-16">
                     {item.featuredImage ? (
+                      // min-w, because w-12 alone does not survive a crowded
+                      // table. Tailwind's preflight puts max-width:100% on every
+                      // img, which makes this one's min-content width zero, and
+                      // auto table layout then takes the space it needs from the
+                      // only column that will yield. The result is a 4px-wide
+                      // sliver of photo at full height: the second badge on a
+                      // row was enough to trigger it.
                       <img
                         alt=""
-                        className="w-12 h-10 object-cover rounded-md bg-muted flex-shrink-0"
+                        className="w-12 min-w-[3rem] h-10 object-cover rounded-md bg-muted flex-shrink-0"
                         src={item.featuredImage}
                         // The image proxy blocks cross-origin referers (returns 403),
                         // so suppress the Referer header to let the thumbnail load.