From 9b151feb4f44d631b44c88c089f184c4c93161c5 Mon Sep 17 00:00:00 2001
From: Gauthier <mail@gauthierth.fr>
Date: Sat, 16 Nov 2024 15:33:26 +0100
Subject: [PATCH] fix(ui): allow thetvdb images for unmatched series (#1105)

When a series has no equivalent in TheTVDB used by Sonarr, a popup is displayed to select the series
on TheTVDB. The images in this popup come from artworks.thetvdb.com, which was not an authorized
domain for Next.js images.

fix #1075
---
 next.config.js                                          | 1 +
 src/components/RequestModal/SearchByNameModal/index.tsx | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/next.config.js b/next.config.js
index 43aa421d..7bb57730 100644
--- a/next.config.js
+++ b/next.config.js
@@ -10,6 +10,7 @@ module.exports = {
     remotePatterns: [
       { hostname: 'gravatar.com' },
       { hostname: 'image.tmdb.org' },
+      { hostname: 'artworks.thetvdb.com' },
     ],
   },
   webpack(config) {
diff --git a/src/components/RequestModal/SearchByNameModal/index.tsx b/src/components/RequestModal/SearchByNameModal/index.tsx
index 0ef7e55b..1b86b614 100644
--- a/src/components/RequestModal/SearchByNameModal/index.tsx
+++ b/src/components/RequestModal/SearchByNameModal/index.tsx
@@ -88,14 +88,14 @@ const SearchByNameModal = ({
                 tvdbId === item.tvdbId ? 'ring ring-indigo-500' : ''
               } `}
             >
-              <div className="flex w-24 flex-none items-center space-x-4">
+              <div className="relative flex w-24 flex-none items-center space-x-4 self-stretch">
                 <Image
                   src={
                     item.remotePoster ??
                     '/images/overseerr_poster_not_found.png'
                   }
                   alt={item.title}
-                  className="h-100 w-auto rounded-md"
+                  className="w-100 h-auto rounded-md"
                   fill
                 />
               </div>