From 0c205af6719d3261d3e2d316774d66dc6af9012c Mon Sep 17 00:00:00 2001
From: Aleksi Viitala <aleksi.viitala@tuni.fi>
Date: Thu, 25 Mar 2021 00:18:16 +0200
Subject: [PATCH] Implement fix for issue 2314: Add padding to prevent music
 controls from clipping

---
 src/assets/css/librarybrowser.scss     | 3 +--
 src/assets/css/site.scss               | 3 +--
 src/controllers/itemDetails/index.html | 2 +-
 src/controllers/list.html              | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss
index 1bbe29b701..902e1c68af 100644
--- a/src/assets/css/librarybrowser.scss
+++ b/src/assets/css/librarybrowser.scss
@@ -1052,8 +1052,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .itemsContainer {
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto;
 }
 
 @media all and (max-height: 31.25em) {
diff --git a/src/assets/css/site.scss b/src/assets/css/site.scss
index 4d851febc9..3d4ea7da0e 100644
--- a/src/assets/css/site.scss
+++ b/src/assets/css/site.scss
@@ -81,8 +81,7 @@ div[data-role="page"] {
 .content-primary,
 .padded-bottom-page,
 .page,
-.pageWithAbsoluteTabs .pageTabContent,
-.itemsContainer {
+.pageWithAbsoluteTabs .pageTabContent {
     /* provides room for the music controls */
     padding-bottom: 5em !important;
 }
diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html
index 5364f01946..5467469827 100644
--- a/src/controllers/itemDetails/index.html
+++ b/src/controllers/itemDetails/index.html
@@ -3,7 +3,7 @@
     </div>
 
     <div class="detailLogo"></div>
-    <div class="detailPageWrapperContainer">
+    <div class="detailPageWrapperContainer padded-bottom-page">
         <div class="detailPagePrimaryContainer padded-left padded-right">
             <div class="primaryImageWrapper hide">
                 <img id="primaryImage" />
diff --git a/src/controllers/list.html b/src/controllers/list.html
index 0bd1f5f016..72dd983d6e 100644
--- a/src/controllers/list.html
+++ b/src/controllers/list.html
@@ -1,7 +1,7 @@
 <div data-role="page" class="view flex flex-direction-column page libraryPage noSecondaryNavPage" data-backbutton="true">
     <div class="alphaPicker alphaPicker-vertical alphaPicker-fixed focuscontainer-y hide">
     </div>
-    <div class="flex-grow padded-left padded-right pageContainerTopPadding">
+    <div class="flex-grow padded-left padded-right padded-bottom-page pageContainerTopPadding">
         <div class="flex align-items-center focuscontainer-x itemsViewSettingsContainer padded-top padded-bottom flex-wrap-wrap">
             <button is="emby-button" class="btnPlay button-flat hide listTextButton-autohide">
                 <span>${HeaderPlayAll}</span>