From 4e5c9b788f06d94264bfa2b7e6a7d3914a7155d9 Mon Sep 17 00:00:00 2001
From: RHDev <ryanthults@gmail.com>
Date: Tue, 2 Sep 2025 12:13:10 -0500
Subject: [PATCH] Display book covers at full height (#266)

# Why
Book covers in the UI are currently cut off on the top and bottom,
making it hard to see.

# How
doubled the height of the book cover image div so the covers are not cut
off. I found that setting it to a specific size (rather than `h-full`)
resulted in better handling of small images and made for a more
consistent look.

# Before
<img width="488" height="520" alt="Screenshot from 2025-09-02 11-44-49"
src="https://github.com/user-attachments/assets/cf94e5f7-3981-40b6-a148-2a847f565c41"
/>
<img width="488" height="520" alt="Screenshot from 2025-09-02 11-45-06"
src="https://github.com/user-attachments/assets/5849eb34-57e8-4c36-af26-cb2f9647605f"
/>



# After
<img width="488" height="520" alt="Screenshot from 2025-09-02 11-41-41"
src="https://github.com/user-attachments/assets/6ffdde1f-ba36-4253-8092-12afe1c8f84e"
/>
<img width="488" height="520" alt="Screenshot from 2025-09-02 11-44-38"
src="https://github.com/user-attachments/assets/e44b57b7-ee03-4e8b-a186-444e8a5bf5aa"
/>

---------

Co-authored-by: Ryan Hults <contact@ryanthults.com>
---
 static/js/main.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/js/main.js b/static/js/main.js
index 2f0882d..e3e411a 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -94,8 +94,8 @@
 
   // ---- Cards ----
   function renderCard(book) {
-    const cover = book.preview ? `<img src="${utils.e(book.preview)}" alt="Cover" class="w-full h-44 object-cover rounded">` :
-      `<div class="w-full h-44 rounded flex items-center justify-center opacity-70" style="background: var(--bg-soft)">No Cover</div>`;
+    const cover = book.preview ? `<img src="${utils.e(book.preview)}" alt="Cover" class="w-full h-88 object-cover rounded">` :
+      `<div class="w-full h-88 rounded flex items-center justify-center opacity-70" style="background: var(--bg-soft)">No Cover</div>`;
 
     const html = `
       <article class="rounded border p-3 flex flex-col gap-3" style="border-color: var(--border-muted); background: var(--bg-soft)">
@@ -172,7 +172,7 @@
       }
     },
     tpl(book) {
-      const cover = book.preview ? `<img src="${utils.e(book.preview)}" alt="Cover" class="w-full h-56 object-cover rounded">` : '';
+      const cover = book.preview ? `<img src="${utils.e(book.preview)}" alt="Cover" class="w-full h-88 object-cover rounded">` : '';
       const infoList = book.info ? Object.entries(book.info).map(([k, v]) => `<li><strong>${utils.e(k)}:</strong> ${utils.e((v||[]).join 
         ? v.join(', ') : v)}</li>`).join('') : '';
       return `