From 741fd9cde5cba0fd67dd9ea2e6c5de5afa65dea4 Mon Sep 17 00:00:00 2001
From: Robbie Davis <robbie@therobbiedavis.com>
Date: Fri, 16 Aug 2024 12:53:58 -0400
Subject: [PATCH] Fixing series card overlay

---
 UI/Web/src/_series-detail-common.scss                  | 10 +++++-----
 .../app/chapter-detail/chapter-detail.component.html   |  2 +-
 .../series-detail/series-detail.component.html         |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss
index e17ae6d246..7b2f1c6f4d 100644
--- a/UI/Web/src/_series-detail-common.scss
+++ b/UI/Web/src/_series-detail-common.scss
@@ -6,6 +6,8 @@
 
 .image-container {
   align-self: flex-start;
+  max-height: 400px;
+  max-width: 280px;
 }
 
 .subtitle {
@@ -39,11 +41,9 @@
 }
 
 .overlay-information {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 350px;
+  position: relative;
+  top: -404px;
+  height: 364px;
   transition: all 0.2s;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.html b/UI/Web/src/app/chapter-detail/chapter-detail.component.html
index 5d1e0566f5..0293d1899d 100644
--- a/UI/Web/src/app/chapter-detail/chapter-detail.component.html
+++ b/UI/Web/src/app/chapter-detail/chapter-detail.component.html
@@ -6,7 +6,7 @@
       <div class="row mb-0 mb-xl-3 info-container">
         <div class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3 position-relative">
 
-          <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'height': '350px', 'max-height': '350px'}"  [imageUrl]="coverImage"></app-image>
+          <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'max-height': '400px'}"  [imageUrl]="coverImage"></app-image>
             @if (chapter.pagesRead < chapter.pages && hasReadingProgress) {
               <div class="progress-banner" ngbTooltip="{{(chapter.pagesRead / chapter.pages) * 100 | number:'1.0-1'}}%">
                 <ngb-progressbar type="primary" [value]="chapter.pagesRead" [max]="chapter.pages" [showValue]="true"></ngb-progressbar>
diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
index c8ac394ea4..8df3029b0a 100644
--- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
+++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
@@ -6,7 +6,7 @@
       <div class="row mb-0 mb-xl-3 info-container">
         <div class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3 position-relative">
 
-          <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'height': '350px', 'max-height': '350px'}"  [imageUrl]="seriesImage"></app-image>
+          <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'max-height': '400px'}"  [imageUrl]="seriesImage"></app-image>
           @if (series.pagesRead < series.pages && hasReadingProgress) {
             <div class="progress-banner" ngbTooltip="{{(series.pagesRead / series.pages) * 100 | number:'1.0-1'}}%">
               <ngb-progressbar type="primary" [value]="series.pagesRead" [max]="series.pages" [showValue]="true"></ngb-progressbar>