From 935cdfceea3a1e88941f24145d42442e38b749c9 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Fri, 20 Dec 2019 22:49:54 +0300
Subject: [PATCH] Fix detailImageContainer padding

---
 src/controllers/itemdetailpage.js |  2 +-
 src/css/librarybrowser.css        | 31 ++++++++-----------------------
 src/itemdetails.html              |  2 +-
 3 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index cbecc3dc60..523b6faf55 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -802,7 +802,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
         }
 
         if (editable) {
-            html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;margin:0;' href='#'>";
+            html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;margin-top:.7em;padding:0' href='#'>";
         }
 
         if (detectRatio && item.PrimaryImageAspectRatio) {
diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css
index 973d982d07..1800df5e36 100644
--- a/src/css/librarybrowser.css
+++ b/src/css/librarybrowser.css
@@ -457,6 +457,7 @@
 }
 
 .detailPageSeconderyContainer {
+    margin: 1.25em 0;
     display:grid;
     grid-template-columns: 100%;
     padding-left:2%;
@@ -464,8 +465,8 @@
 }
 
 .detailImageContainer {
-    -webkit-flex-shrink: 0;
-    flex-shrink: 0;
+    margin: 1.25em 0;
+    width: 350px;
     position: sticky;
     top:15%;
     float: left;
@@ -513,35 +514,22 @@
 }
 
 .itemDetailImage {
-    width: 100%;
+    width: 350px;
     -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
     box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 
-.thumbDetailImageContainer {
-    width: 350px;
-}
-
-.portraitDetailImageContainer {
-    width: 350px;
-}
-
-.squareDetailImageContainer {
-    width: 400px;
-}
-
 @media all and (max-width:62.5em) {
     .detailPageContent {
         position: relative
     }
 
     .detailImageContainer {
-        width: auto
+        width: 100px !important
     }
 
     .itemDetailImage {
-        height: 120px;
-        width: auto !important
+        width: 100px !important
     }
 
     .btnPlaySimple {
@@ -712,11 +700,8 @@
 }
 
 .detailImageProgressContainer {
-    position: absolute;
-    width: 300px;
-    bottom: 12px;
-    text-align: center;
-    padding-left: 25px;
+    margin-left: 6px;
+    width: 350px;
 }
 
 .detailButton-mobile-text {
diff --git a/src/itemdetails.html b/src/itemdetails.html
index 3f0d327368..c210bdf216 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -111,7 +111,7 @@
                 </button>
             </div>
         </div>
-        <div class="detailImageContainer verticalSection-extrabottompadding"></div>
+        <div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>
         <div class="detailPageSeconderyContainer">
 
             <div class="detailPageContent">