From ae8e908bf5df87c1355644fae1b4a8db9f6b0cb6 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Sat, 17 Jan 2026 20:58:29 +1300
Subject: [PATCH] fix: square thumbnails with object-contain for better image
 quality

- Change thumbnail from 160x112 to 144x144 (square)
- Use object-contain instead of object-cover to prevent cropping/distortion

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/quickstart/TemplateCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/quickstart/TemplateCard.tsx b/src/components/quickstart/TemplateCard.tsx
index 1dcfe677..214609ea 100644
--- a/src/components/quickstart/TemplateCard.tsx
+++ b/src/components/quickstart/TemplateCard.tsx
@@ -54,10 +54,10 @@ export function TemplateCard({
         ${disabled && !isLoading ? "opacity-50" : ""}
       `}
     >
-      {/* Thumbnail - Left side */}
+      {/* Thumbnail - Left side (square) */}
       <div
         className={`
-          w-40 h-28 flex-shrink-0 rounded-lg overflow-hidden relative
+          w-36 h-36 flex-shrink-0 rounded-lg overflow-hidden relative
           ${
             isLoading
               ? "bg-blue-500/20"
@@ -72,7 +72,7 @@ export function TemplateCard({
             <img
               src={previewImage}
               alt={`${template.name} preview`}
-              className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${hoverImage ? "group-hover:opacity-0" : ""}`}
+              className={`absolute inset-0 w-full h-full object-contain transition-opacity duration-300 ${hoverImage ? "group-hover:opacity-0" : ""}`}
             />
             {/* Hover image (if provided) */}
             {hoverImage && (
@@ -80,7 +80,7 @@ export function TemplateCard({
               <img
                 src={hoverImage}
                 alt={`${template.name} hover preview`}
-                className="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                className="absolute inset-0 w-full h-full object-contain opacity-0 group-hover:opacity-100 transition-opacity duration-300"
               />
             )}
           </>