From 2968987c6b07ec39573152fc2bbd0df66988e320 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 22 Jul 2025 18:57:24 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=F0=9F=8F=BC=20Prettified=20Volumes?=
 =?UTF-8?q?=20search=20results=20from=20CV?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Search/Search.tsx | 31 ++++++++++++++-----------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/client/components/Search/Search.tsx b/src/client/components/Search/Search.tsx
index a41279e..29d75e7 100644
--- a/src/client/components/Search/Search.tsx
+++ b/src/client/components/Search/Search.tsx
@@ -357,7 +357,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
                 result.resource_type === "volume" && (
                   <div
                     key={result.id}
-                    className="flex gap-4 py-4 border-b border-slate-300 dark:border-slate-700"
+                    className="relative flex items-start gap-4 py-6 border-b border-slate-300 dark:border-slate-700"
                   >
                     {/* LEFT COLUMN: COVER */}
                     <Card
@@ -371,7 +371,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
                     />
 
                     {/* RIGHT COLUMN */}
-                    <div className="flex-1 min-w-0 flex flex-col">
+                    <div className="flex-1 min-w-0">
                       {/* TITLE */}
                       <div className="text-lg font-bold text-gray-900 dark:text-white">
                         {result.name || <span>No Name</span>}
@@ -438,18 +438,21 @@ export const Search = ({}: ISearchProps): ReactElement => {
                           )}
                         </p>
                       )}
-
-                      <PopoverButton
-                        content={`This will add ${result.volume.name} to your wanted list.`}
-                        clickHandler={() =>
-                          addToWantedList({
-                            source: "comicvine",
-                            comicObject: result,
-                            markEntireVolumeWanted: false,
-                            resourceType: "issue",
-                          })
-                        }
-                      />
+                      {result.name ? (
+                        <div className="mt-4 justify-self-end">
+                          <PopoverButton
+                            content={`This will add ${result.count_of_issues} issues your wanted list.`}
+                            clickHandler={() =>
+                              addToWantedList({
+                                source: "comicvine",
+                                comicObject: result,
+                                markEntireVolumeWanted: false,
+                                resourceType: "issue",
+                              })
+                            }
+                          />
+                        </div>
+                      ) : null}
                     </div>
                   </div>
                 )