Fix: Tweaked the width of 'My Media (Small)' buttons

- this optimises the layout with increased card sizes without altering their count
- this allows getting rid of many workarounds for alignment of section headings
- this approach uses css 'gap' like on desktop
- it also makes the layout more predictable/consistent

Theme/ElegantFin-theme-nightly.css

@@ -157,6 +157,10 @@
     /* use 10% to crop the top 10% of a backdrop image on a 16:9 screen (recommended) [default]; 
        use a figure between 0% and 20% according to your liking */
     --backdropTrimFromTop: 10%;
+
+    /* use numbers greater than 1.0 to increase the size of 'Continue Watching' cards [default: 1.25];
+       use 1.0 to disable this effect */
+    --resumeCardScale: 1.25;
 }
 
 html {
@@ -179,7 +183,6 @@ body {
 }
 
 .layout-mobile {
-    --itemColumnGap: 0;
     --headerColorGradient: var(--headerColorGradientAlt);
     --blurLargest: blur(12px);
     --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
@@ -325,7 +328,7 @@ body {
     border: var(--defaultLighterBorder);
 }
 
-.layout-mobile .countIndicator {
+.layout-mobile .indicator {
     font-size: 70%;
 }
 
@@ -707,7 +710,7 @@ body {
     }
 }
 
-/* 12 posters, 9 thumbs, 4K*/
+/* 12 posters, 9 thumbs, 2160p*/
 @media (max-width: 220em) {
     .portraitCard,
     .squareCard {
@@ -723,12 +726,9 @@ body {
         --cardCount: 9;
     }
 
-    .backdropCard {
+    .backdropCard,
-        --cardCount: 9;
-    }
-
     .overflowBackdropCard {
-        --cardCount: 8;
+        --cardCount: 7;
     }
 }
 
@@ -748,16 +748,13 @@ body {
         --cardCount: 9;
     }
 
-    .backdropCard {
+    /* .backdropCard,
-        --cardCount: 9;
-    }
-
     .overflowBackdropCard {
-        --cardCount: 8;
+        --cardCount: 7;
-    }
+    } */
 }
 
-/* 10 posters, 8 thumbs */
+/* 10 posters, 8 thumbs, 1440p */
 @media (max-width: 170em) {
     .portraitCard,
     .squareCard {
@@ -773,12 +770,9 @@ body {
         --cardCount: 9;
     }
 
-    .backdropCard {
+    .backdropCard,
-        --cardCount: 8;
-    }
-
     .overflowBackdropCard {
-        --cardCount: 7;
+        --cardCount: 6;
     }
 }
 
@@ -798,12 +792,9 @@ body {
         --cardCount: 7;
     }
 
-    .backdropCard {
+    .backdropCard,
-        --cardCount: 7;
-    }
-
     .overflowBackdropCard {
-        --cardCount: 6;
+        --cardCount: 5;
     }
 }
 
@@ -819,28 +810,22 @@ body {
         --cardCount: 7;
     }
 
-    .layout-tv .portraitCard,
-    .layout-tv .squareCard,
-    .layout-tv .overflowPortraitCard,
-    .layout-tv .overflowSquareCard {
-        --cardCount: 6;
-    }
-
     .squareCard:has(.cardFooter) {
         --cardCount: 6;
     }
 
-    .backdropCard {
+    .backdropCard,
-        --cardCount: 6;
+    .layout-tv .portraitCard,
-    }
+    .layout-tv .squareCard,
-
+    .layout-tv .overflowPortraitCard,
+    .layout-tv .overflowSquareCard,
     .overflowBackdropCard {
         --cardCount: 5;
     }
 
     .layout-tv .backdropCard,
     .layout-tv .overflowBackdropCard {
-        --cardCount: 4;
+        --cardCount: 3;
     }
 }
 
@@ -857,12 +842,9 @@ body {
         --cardCount: 6;
     }
 
-    .backdropCard {
+    .backdropCard,
-        --cardCount: 6;
-    }
-
     .overflowBackdropCard {
-        --cardCount: 5;
+        --cardCount: 4;
     }
 }
 
@@ -947,7 +929,11 @@ body {
 }
 
 .layout-mobile .card {
-    --sidePadding: 5%;
+    padding: 0;
+}
+
+.cardBox {
+    margin-top: 0;
 }
 
 .card {
@@ -967,9 +953,15 @@ body {
 }
 
 .layout-mobile .card {
+    --effectiveWidth: calc((91vw - (var(--sidePadding) * 2)));
     --cardWidth: calc(var(--effectiveWidth) / var(--cardCount));
 }
 
+.layout-mobile .backdropCard,
+.layout-mobile .overflowBackdropCard {
+    --effectiveWidth: calc((94vw - (var(--sidePadding) * 2)));
+}
+
 /* this makes the card sizes smaller when phone is in landscape mode */
 @media (orientation: landscape) and (max-height: 40em) {
     .layout-mobile .card {
@@ -977,6 +969,12 @@ body {
     }
 }
 
+#homeTab .overflowBackdropCard[data-positionticks],
+.nextUpItems > .card,
+#resumableItems > .card {
+    width: calc(var(--cardWidth) * var(--resumeCardScale)) !important;
+}
+
 .detailPageWrapperContainer {
     padding-top: unset;
     margin-top: unset;
@@ -1080,16 +1078,11 @@ body {
     font-size: 1.25em;
 }
 
-.verticalSection.emby-scroller-container > h2.sectionTitle.sectionTitle-cards {
-    padding-top: 1.25em !important;
-    margin: 0 0 -0.5em 0;
-}
-
 #itemDetailPage .emby-scroller-container,
 #itemDetailPage .emby-scroller,
 #itemDetailPage .scrollX {
     margin: 0 calc(-1 * var(--sidePadding));
-    padding-left: calc(var(--sidePadding) - 0.375em);
+    padding-left: calc(var(--sidePadding));
     /* mask-image: linear-gradient(90deg, transparent, white var(--sidePadding), white calc(100vw - var(--sidePadding)), transparent); */
 }
 
@@ -1101,7 +1094,7 @@ body {
 
 .emby-scroller,
 .scrollX {
-    padding-left: calc(var(--sidePadding) - 0.375em);
+    padding-left: calc(var(--sidePadding));
 }
 
 .sectionTabs .scrollX {
@@ -1110,6 +1103,7 @@ body {
 
 .itemsContainer:not(.editorsChoiceItemsContainer) {
     column-gap: var(--itemColumnGap);
+    row-gap: 1em;
 }
 
 .layout-desktop .sectionTitle,
@@ -1119,10 +1113,6 @@ body {
 
 .emby-scrollbuttons,
 [dir="ltr"] .emby-scrollbuttons {
-    padding-top: 1.25em;
-}
-
-.sectionTitleContainer + .emby-scrollbuttons {
     padding-top: 0;
 }
 
@@ -1461,15 +1451,16 @@ body {
     font-size: 3.5em;
 }
 
-@media (max-width: 50em) {
+.homeLibraryButton {
-    .homeLibraryButton {
+    width: min(45%, 12rem);
-        width: 45.6% !important;
+    min-width: 15%;
-    }
+    margin: 0 !important;
 }
 
-.homeLibraryButton {
+@media (max-width: 50em) {
-    padding-inline-start: 0.25em;
+    .homeLibraryButton {
-    min-width: 15%;
+        width: 47.6% !important;
+    }
 }
 
 @media (orientation: portrait) and (max-width: 40em) {
@@ -1814,6 +1805,10 @@ progress + span {
     padding-bottom: 5vh;
 }
 
+.mainDrawer-scrollContainer > div:first-child {
+    margin-bottom: 1em;
+}
+
 .btnHeaderSave.button-flat {
     color: var(--uiAccentColor) !important;
     gap: 0.3em;
@@ -2699,12 +2694,12 @@ div[data-role="controlgroup"] a.ui-btn-active {
     row-gap: 1em;
     column-gap: 3em;
     max-width: unset !important;
-    grid-template-columns: 25% 1fr 1fr 1fr;
+    grid-template-columns: 1.3fr 0.7fr 1fr 1fr;
     margin-bottom: 1.5em;
 }
 
 .layout-mobile .detailSection {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr !important;
 }
 
 .detailPageContent {
@@ -2875,6 +2870,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
     grid-column: 1 / -1;
 }
 
+.collectionItems {
+    order: 2;
+}
+
 .programGuideSection:not(.hide) {
     order: -1;
     margin-top: 2em;
@@ -2913,6 +2912,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
     height: 70%;
 }
 
+.layout-mobile .alphaPicker-vertical {
+    right: 0 !important;
+}
+
 .alphaPicker {
     justify-content: center;
 }
@@ -2930,20 +2933,6 @@ div[data-role="controlgroup"] a.ui-btn-active {
     padding-right: var(--sidePadding) !important;
 }
 
-/* .padded-left {
-    padding-left: var(--sidePadding) !important;
-} */
-
-.layout-mobile .padded-right-withalphapicker {
-    padding-left: 4.5%;
-    padding-right: 6.5%;
-}
-
-/* test disabled for 10.11.0 */
-/* .detailPagePrimaryContent.padded-right {
-    padding-right: 0 !important;
-} */
-
 [dir="ltr"] .detailPageContent,
 .content-primary {
     padding-left: var(--sidePadding) !important;
@@ -2999,6 +2988,11 @@ div[data-role="controlgroup"] a.ui-btn-active {
     background: var(--selectorBackgroundColor) !important;
 }
 
+.verticalSection {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+}
+
 .sectionTitleTextButton {
     padding: 0 0.5em;
 }
@@ -3013,7 +3007,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 
 .sectionTitleContainer-cards {
     padding-top: 0;
-    margin: 0.75em 0 -0.75em 0;
+    padding-bottom: 0.2em;
 }
 
 .sectionTitleTextButton > * {
@@ -3028,11 +3022,6 @@ div[data-role="controlgroup"] a.ui-btn-active {
     max-width: 88vw;
 }
 
-/* this is needed for alignment of non-clickable section headings on phones */
-.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {
-    margin: 0.75em 0 -0.75em 0;
-}
-
 .dashboardSection .sectionTitleTextButton > .material-icons,
 .sectionTitleTextButton > .material-icons,
 .dashboardSection .sectionTitleTextButton > .material-icons.material-icons {