From 0a9ddb490d9b4412040725890cbcc6fb361e17c7 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Fri, 31 Oct 2025 14:22:06 -0400
Subject: [PATCH] Use consistent padding on item details screen

---
 src/controllers/itemDetails/index.html | 126 ++++++++++++-------------
 src/styles/librarybrowser.scss         |  35 -------
 2 files changed, 62 insertions(+), 99 deletions(-)

diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html
index 00373300d6..036d976702 100644
--- a/src/controllers/itemDetails/index.html
+++ b/src/controllers/itemDetails/index.html
@@ -176,88 +176,86 @@
             </div>
         </div>
 
-        <div class="detailPageSecondaryContainer padded-bottom-page">
-            <div class="detailPageContent">
-                <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
-                    <h2 class="sectionTitle sectionTitle-cards hide">
-                        <span></span>
-                    </h2>
-                    <div>
-                        <div is="emby-itemscontainer" class="itemsContainer padded-right" style="text-align: left;"></div>
-                    </div>
+        <div class="detailPageSecondaryContainer padded-left padded-bottom-page">
+            <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
+                <h2 class="sectionTitle sectionTitle-cards hide">
+                    <span></span>
+                </h2>
+                <div>
+                    <div is="emby-itemscontainer" class="itemsContainer padded-right" style="text-align: left;"></div>
                 </div>
+            </div>
 
-                <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderAdditionalParts}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="additionalPartsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderAdditionalParts}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="additionalPartsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div class="verticalSection detailVerticalSection moreFromSeasonSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div class="verticalSection detailVerticalSection moreFromSeasonSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="lyricsSection" class="verticalSection-extrabottompadding detailVerticalSection lyricsContainer hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${Lyrics}</h2>
-                    <div is="emby-itemscontainer" class="vertical-list itemsContainer"></div>
+            <div id="lyricsSection" class="verticalSection-extrabottompadding detailVerticalSection lyricsContainer hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${Lyrics}</h2>
+                <div is="emby-itemscontainer" class="vertical-list itemsContainer"></div>
+            </div>
+
+            <div class="verticalSection detailVerticalSection moreFromArtistSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div class="verticalSection detailVerticalSection moreFromArtistSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastAndCrew}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastAndCrew}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="guestCastCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 id="guestCastHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderGuestCast}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="guestCastContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="guestCastCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 id="guestCastHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderGuestCast}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="guestCastContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
+                <h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
+                <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>
+            </div>
+
+            <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${SpecialFeatures}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="specialsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
-                    <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>
+            <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${MusicVideos}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="musicVideosContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${SpecialFeatures}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="specialsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="scenesCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${MusicVideos}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="musicVideosContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
-                </div>
-
-                <div id="scenesCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
-                </div>
-
-                <div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
-                    </div>
+            <div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
                 </div>
             </div>
         </div>
diff --git a/src/styles/librarybrowser.scss b/src/styles/librarybrowser.scss
index 1a82a2de76..80e29b3465 100644
--- a/src/styles/librarybrowser.scss
+++ b/src/styles/librarybrowser.scss
@@ -587,39 +587,6 @@
     }
 }
 
-.detailPageContent {
-    display: flex;
-    flex-direction: column;
-
-    .layout-desktop &,
-    .layout-tv & {
-        .emby-scroller {
-            [dir="ltr"] & {
-                margin-left: 0;
-            }
-
-            [dir="rtl"] & {
-                margin-right: 0;
-            }
-        }
-    }
-
-    [dir="ltr"] & {
-        padding-left: 32.45vw;
-        padding-right: 2%;
-    }
-
-    [dir="rtl"] & {
-        padding-right: 32.45vw;
-        padding-left: 2%;
-    }
-
-    .layout-mobile & {
-        padding-left: 5%;
-        padding-right: 5%;
-    }
-}
-
 .detailSectionContent a {
     color: inherit;
 }
@@ -919,12 +886,10 @@
 
     [dir="ltr"] & {
         padding-left: 32.45vw;
-        padding-right: 2%;
     }
 
     [dir="rtl"] & {
         padding-right: 32.45vw;
-        padding-left: 2%;
     }
 
     .layout-mobile & {