From 0bbc07e0b9973bcd6339765f9c16e7da4e350c7d Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Fri, 12 Jun 2026 10:10:24 +0000
Subject: [PATCH] fix: improve thumbnail quality and show gradient border
 around preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Increase pdftocairo output from 190px/q50 to 380px/q82 — 2× resolution
for crisp rendering on retina displays, higher quality to eliminate
visible compression artefacts.

Inset the thumbnail image 6px from the tile edges (inset: 6px) with a
4px border-radius so the card's colour gradient is visible as a frame
around the document preview.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 services/clsi/app/js/ConversionController.js                 | 4 ++--
 .../web/frontend/stylesheets/pages/project-list-lumiere.scss | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/services/clsi/app/js/ConversionController.js b/services/clsi/app/js/ConversionController.js
index 53478aa8af..8f73746a3c 100644
--- a/services/clsi/app/js/ConversionController.js
+++ b/services/clsi/app/js/ConversionController.js
@@ -287,9 +287,9 @@ async function thumbnailFromBuild(req, res) {
       'pdftocairo',
       [
         '-jpeg',
-        '-jpegopt', 'quality=50',
+        '-jpegopt', 'quality=82',
         '-singlefile',
-        '-scale-to-x', '190',
+        '-scale-to-x', '380',
         '-scale-to-y', '-1',
         '-f', '1',
         '-l', '1',
diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index dae9a322f8..a7f6614c05 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
@@ -542,11 +542,10 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
   // Falls back to the gradient + initial when the image 404s or is loading.
   .lumiere-card-thumb-img {
     position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
+    inset: 6px;
     object-fit: cover;
     object-position: top center;
+    border-radius: 4px;
     z-index: 1;
   }