From fec288bba343c037054d14aed926280ec3a8b5a8 Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Thu, 21 Sep 2023 21:25:36 +0530
Subject: [PATCH] Fix BackgroundImagePlaceholderDiv to work properly in Safari
 (#645)

---
 src/components/BackgroundImagePlaceholderDiv.tsx   | 2 +-
 src/components/Collection/CardViewItem.tsx         | 2 +-
 src/components/Collection/GridViewItem.tsx         | 2 +-
 src/components/Collection/Series/SeriesEpisode.tsx | 2 +-
 src/pages/collection/series/SeriesImages.tsx       | 2 +-
 src/pages/collection/series/SeriesOverview.tsx     | 2 +-
 src/pages/dashboard/components/EpisodeDetails.tsx  | 2 +-
 src/pages/dashboard/components/SeriesDetails.tsx   | 2 +-
 src/pages/dashboard/panels/RecommendedAnime.tsx    | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/BackgroundImagePlaceholderDiv.tsx b/src/components/BackgroundImagePlaceholderDiv.tsx
index d33a247f3..9a38f3cf7 100644
--- a/src/components/BackgroundImagePlaceholderDiv.tsx
+++ b/src/components/BackgroundImagePlaceholderDiv.tsx
@@ -72,7 +72,7 @@ function BackgroundImagePlaceholderDiv(props: Props) {
   }, [imageSource]);
 
   return (
-    <div className={`${className} overflow-hidden`}>
+    <div className={`${className} relative overflow-hidden`}>
       <div
         className={cx(
           'absolute w-full h-full flex flex-col top-0 left-0 text-center z-[-1]',
diff --git a/src/components/Collection/CardViewItem.tsx b/src/components/Collection/CardViewItem.tsx
index 1c7151aae..e9b452034 100644
--- a/src/components/Collection/CardViewItem.tsx
+++ b/src/components/Collection/CardViewItem.tsx
@@ -72,7 +72,7 @@ const CardViewItem = ({ item, mainSeries }: { item: CollectionGroupType, mainSer
         <Link to={viewRouteLink()}>
           <BackgroundImagePlaceholderDiv
             image={poster}
-            className="group relative h-[12.5625rem] w-[8.625rem] shrink-0 rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+            className="group h-[12.5625rem] w-[8.625rem] shrink-0 rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
             hidePlaceholderOnHover
             zoomOnHover
           >
diff --git a/src/components/Collection/GridViewItem.tsx b/src/components/Collection/GridViewItem.tsx
index 82891aa0b..d3a023190 100644
--- a/src/components/Collection/GridViewItem.tsx
+++ b/src/components/Collection/GridViewItem.tsx
@@ -47,7 +47,7 @@ const GridViewItem = ({ isSeries = false, item }: Props) => {
       <div className="group flex w-[13.0625rem] shrink-0 flex-col content-center">
         <BackgroundImagePlaceholderDiv
           image={mainPoster}
-          className="relative mb-3 h-[19.0625rem] rounded-md border border-overlay-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+          className="mb-3 h-[19.0625rem] rounded-md border border-overlay-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
           hidePlaceholderOnHover
           zoomOnHover
         >
diff --git a/src/components/Collection/Series/SeriesEpisode.tsx b/src/components/Collection/Series/SeriesEpisode.tsx
index 2a24690dc..3cc3f583a 100644
--- a/src/components/Collection/Series/SeriesEpisode.tsx
+++ b/src/components/Collection/Series/SeriesEpisode.tsx
@@ -62,7 +62,7 @@ const SeriesEpisode = ({ episode }: Props) => {
       <div className="z-10 flex items-center gap-x-8 p-8">
         <BackgroundImagePlaceholderDiv
           image={thumbnail}
-          className="group relative h-[13rem] min-w-[22.3125rem] rounded-md border border-panel-border"
+          className="group h-[13rem] min-w-[22.3125rem] rounded-md border border-panel-border"
           hidePlaceholderOnHover
           zoomOnHover
         >
diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
index 875ff935b..18a2fc68e 100644
--- a/src/pages/collection/series/SeriesImages.tsx
+++ b/src/pages/collection/series/SeriesImages.tsx
@@ -124,7 +124,7 @@ const SeriesImages = () => {
               <BackgroundImagePlaceholderDiv
                 image={item}
                 className={cx(
-                  'rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] relative border',
+                  'rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] border',
                   item === selectedImage ? 'border-panel-important border-2 opacity-50' : 'border-panel-border',
                   sizeMap[type],
                 )}
diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx
index c89758aed..6d38712f0 100644
--- a/src/pages/collection/series/SeriesOverview.tsx
+++ b/src/pages/collection/series/SeriesOverview.tsx
@@ -37,7 +37,7 @@ const NextUpEpisode = ({ nextUpEpisode }: { nextUpEpisode: EpisodeType }) => {
     <div className="z-10 flex items-center gap-x-8">
       <BackgroundImagePlaceholderDiv
         image={thumbnail}
-        className="relative h-[13rem] min-w-[22.3125rem] rounded-md border border-panel-border"
+        className="h-[13rem] min-w-[22.3125rem] rounded-md border border-panel-border"
       />
       <EpisodeDetails episode={nextUpEpisode} />
     </div>
diff --git a/src/pages/dashboard/components/EpisodeDetails.tsx b/src/pages/dashboard/components/EpisodeDetails.tsx
index 93b9a0079..36227505c 100644
--- a/src/pages/dashboard/components/EpisodeDetails.tsx
+++ b/src/pages/dashboard/components/EpisodeDetails.tsx
@@ -51,7 +51,7 @@ function EpisodeDetails(props: Props): JSX.Element {
         : null}
       <BackgroundImagePlaceholderDiv
         image={episode.SeriesPoster}
-        className="relative mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
       >
         {percentage && <div className="absolute bottom-0 left-0 h-1 bg-panel-primary" style={{ width: percentage }} />}
         {isInCollection && (
diff --git a/src/pages/dashboard/components/SeriesDetails.tsx b/src/pages/dashboard/components/SeriesDetails.tsx
index 223675a14..15504657d 100644
--- a/src/pages/dashboard/components/SeriesDetails.tsx
+++ b/src/pages/dashboard/components/SeriesDetails.tsx
@@ -13,7 +13,7 @@ function SeriesDetails(props: { series: SeriesType }): JSX.Element {
     <div key={`series-${series.IDs.ID}`} className="mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0">
       <BackgroundImagePlaceholderDiv
         image={mainPoster}
-        className="relative mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
       />
       <p className="mb-1 truncate text-center text-sm font-semibold" title={series.Name}>{series.Name}</p>
       <p className="truncate text-center text-sm opacity-75" title={`${series.Size} Files`}>
diff --git a/src/pages/dashboard/panels/RecommendedAnime.tsx b/src/pages/dashboard/panels/RecommendedAnime.tsx
index 3dbcd9fb8..bcf1dc531 100644
--- a/src/pages/dashboard/panels/RecommendedAnime.tsx
+++ b/src/pages/dashboard/panels/RecommendedAnime.tsx
@@ -19,7 +19,7 @@ const RecommendedAnime = () => {
     <div key={`series-${series.ID}`} className="mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0">
       <BackgroundImagePlaceholderDiv
         image={series.Poster}
-        className="group relative mb-2 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="group mb-2 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
       >
         <div
           className="absolute left-0 top-0 flex h-full w-full cursor-pointer flex-col items-center justify-center bg-panel-background-transparent text-sm font-semibold opacity-0 transition-opacity group-hover:opacity-100"