From 6c4fdabb798292e002a43261185a004698e7b90b Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Fri, 9 Aug 2024 15:12:32 -0400
Subject: [PATCH] cleaned up search results UI

---
 frontend/src/Search.svelte | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Search.svelte b/frontend/src/Search.svelte
index f2a5795..12638d3 100644
--- a/frontend/src/Search.svelte
+++ b/frontend/src/Search.svelte
@@ -2,7 +2,7 @@
 
     import {AniListSearch} from "../wailsjs/go/main/App";
     import type {AniSearchList} from "./anilist/types/AniListTypes";
-    import {GetAniListSingleItemAndOpenModal} from "./GetAniListSingleItemAndOpenModal.svelte";
+    import {GetAniListSingleItemAndOpenModal} from "./GlobalVariablesAndHelperFunctions.svelte";
 
     let aniSearch = ""
     let aniListSearch: AniSearchList
@@ -51,14 +51,18 @@
                 aria-labelledby="aniListSearchButton">
                 {#each aniListSearch.data.Page.media as media}
                     <li class="w-full">
-                        <button on:click={() => {
-                            GetAniListSingleItemAndOpenModal(media.id, false)
-                        }}
-                                class="flex w-full items-start p-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white rounded-lg">
-                            <img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media.coverImage.large}
-                                 alt="{media.title.english === '' || media.title.english === null ?  media.title.romaji : media.title.english} Cover">
-                            <p class="bg-gray-800 text-left w-full h-24 p-2 rounded-tr-lg rounded-br-lg">{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english }</p>
-                        </button>
+                        <div class="flex w-full items-start p-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white rounded-lg">
+                            <button on:click={() => {
+                                GetAniListSingleItemAndOpenModal(media.id, false)
+                            }}
+                                    >
+                                <img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media.coverImage.large}
+                                     alt="{media.title.english === '' || media.title.english === null ?  media.title.romaji : media.title.english} Cover">
+                            </button>
+                                <button class="rounded-bl-lg rounded-tl-lg w-full h-24" on:click={() => {
+                                GetAniListSingleItemAndOpenModal(media.id, false)
+                            }} >{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english }</button>
+                        </div>
                     </li>
                 {/each}
             </ul>