From eca26e912f0318da946991da86aa0dc8c38c9a44 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 10 May 2023 14:34:06 -0700
Subject: [PATCH] Set card images to cover

- Better UX since it makes the grid look more consistent
---
 .../virtual-grid/grid-card/default-card.tsx       | 15 +++++++++++++--
 .../virtual-grid/grid-card/poster-card.tsx        | 15 +++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/virtual-grid/grid-card/default-card.tsx b/src/renderer/components/virtual-grid/grid-card/default-card.tsx
index 39e51603..04c8574c 100644
--- a/src/renderer/components/virtual-grid/grid-card/default-card.tsx
+++ b/src/renderer/components/virtual-grid/grid-card/default-card.tsx
@@ -91,6 +91,18 @@ const ImageContainer = styled.div`
   }
 `;
 
+const Image = styled(SimpleImg)`
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  border: 0;
+
+  img {
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
 const DetailContainer = styled.div`
   margin-top: 0.5rem;
 `;
@@ -143,8 +155,7 @@ export const DefaultCard = ({
         <InnerCardContainer>
           <ImageContainer>
             {data?.imageUrl ? (
-              <SimpleImg
-                imgStyle={{ objectFit: 'cover' }}
+              <Image
                 importance="auto"
                 placeholder={data?.imagePlaceholderUrl || 'var(--placeholder-bg)'}
                 src={data?.imageUrl}
diff --git a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx
index c1fc9b51..d737d8f1 100644
--- a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx
+++ b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx
@@ -79,6 +79,18 @@ const ImageContainer = styled.div`
   }
 `;
 
+const Image = styled(SimpleImg)`
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  border: 0;
+
+  img {
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
 const DetailContainer = styled.div`
   margin-top: 0.5rem;
 `;
@@ -128,8 +140,7 @@ export const PosterCard = ({
         <LinkContainer onClick={() => navigate(path)}>
           <ImageContainer>
             {data?.imageUrl ? (
-              <SimpleImg
-                imgStyle={{ objectFit: 'cover' }}
+              <Image
                 importance="auto"
                 placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
                 src={data?.imageUrl}