From d68d9b7ed205ce10e40d97ba676594b1cf262616 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 7 Apr 2024 15:21:36 +0200
Subject: [PATCH] Remove usage of z-index for manga badges (#711)

Caused the badges to be over some components which they were not intended to be
---
 src/components/MangaCard.tsx | 48 +++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
index 132cde29..5e806abc 100644
--- a/src/components/MangaCard.tsx
+++ b/src/components/MangaCard.tsx
@@ -197,6 +197,28 @@ export const MangaCard = (props: MangaCardProps) => {
                                                 height: '100%',
                                             }}
                                         >
+                                            <SpinnerImage
+                                                alt={title}
+                                                src={thumbnailUrl}
+                                                imgStyle={
+                                                    inLibraryIndicator && inLibrary
+                                                        ? {
+                                                              height: '100%',
+                                                              width: '100%',
+                                                              objectFit: 'cover',
+                                                              filter: 'brightness(0.4)',
+                                                          }
+                                                        : {
+                                                              height: '100%',
+                                                              width: '100%',
+                                                              objectFit: 'cover',
+                                                          }
+                                                }
+                                                spinnerStyle={{
+                                                    display: 'grid',
+                                                    placeItems: 'center',
+                                                }}
+                                            />
                                             <Stack
                                                 alignItems="start"
                                                 justifyContent="space-between"
@@ -210,9 +232,7 @@ export const MangaCard = (props: MangaCardProps) => {
                                             >
                                                 <BadgeContainer>
                                                     {inLibraryIndicator && inLibrary && (
-                                                        <Typography
-                                                            sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
-                                                        >
+                                                        <Typography sx={{ backgroundColor: 'primary.dark' }}>
                                                             {t('manga.button.in_library')}
                                                         </Typography>
                                                     )}
@@ -239,28 +259,6 @@ export const MangaCard = (props: MangaCardProps) => {
                                                     handleSelection={handleSelection}
                                                 />
                                             </Stack>
-                                            <SpinnerImage
-                                                alt={title}
-                                                src={thumbnailUrl}
-                                                imgStyle={
-                                                    inLibraryIndicator && inLibrary
-                                                        ? {
-                                                              height: '100%',
-                                                              width: '100%',
-                                                              objectFit: 'cover',
-                                                              filter: 'brightness(0.4)',
-                                                          }
-                                                        : {
-                                                              height: '100%',
-                                                              width: '100%',
-                                                              objectFit: 'cover',
-                                                          }
-                                                }
-                                                spinnerStyle={{
-                                                    display: 'grid',
-                                                    placeItems: 'center',
-                                                }}
-                                            />
                                             <>
                                                 {gridLayout !== GridLayout.Comfortable && (
                                                     <>