From 6e40eb603a1796e408a75c4d1ceea1671b95ef78 Mon Sep 17 00:00:00 2001
From: HighImKevin <kevinjohncampbell@gmail.com>
Date: Tue, 6 Oct 2026 02:16:37 -0400
Subject: [PATCH] Fix issues related to formatting of multi-query picker
 sections with Caption titles

---
 scripts/cardBuilder.css | 30 ++++++++++++++++++++----------
 scripts/cardBuilder.js  |  5 +++--
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/scripts/cardBuilder.css b/scripts/cardBuilder.css
index a9545a6..2a46afc 100644
--- a/scripts/cardBuilder.css
+++ b/scripts/cardBuilder.css
@@ -592,8 +592,9 @@
 	color: #f2b01e;
 	font-size: 1.4em;
 	height: auto !important;
-	margin-right: 0.125em;
 	width: auto !important;
+	margin-left: 0em !important;
+	margin-right: 0em !important;
 }
 
 .spotlight-rating-value {
@@ -795,7 +796,7 @@
 	font-size: 28px;
 }
 
-.spotlight-watchlist-button {
+.spotlight-buttons-container button:not(.btnPlay) {
 	width: 48px;
 	height: 48px;
 	border-radius: 50%;
@@ -1457,7 +1458,8 @@
 .sectionTitle-wrapper {
 	display: grid;
 	align-items: center;
-	grid-template-columns: auto 1fr;
+	/* title | picker (optional; collapses when absent) | controls */
+	grid-template-columns: auto auto 1fr;
 	flex: 1;
 	min-width: 0;
 	width: 100%;
@@ -1470,12 +1472,18 @@
 	min-width: 0;
 }
 
-.sectionTitle-wrapper > .section-controls {
+.sectionTitle-wrapper > .multi-query-picker-button {
 	grid-column: 2;
 	grid-row: 1;
 	align-self: center;
 }
 
+.sectionTitle-wrapper > .section-controls {
+	grid-column: 3;
+	grid-row: 1;
+	align-self: center;
+}
+
 /* Spinning animation when refreshing */
 [data-refreshing="true"] .section-refresh-button {
 	animation: spin 1s linear infinite;
@@ -1871,10 +1879,16 @@
 	padding: 0px !important;
 }
 .spotlight-section .mainDetailButtons > :is(button.emby-button) {
-	padding: 0.5em !important;
+	padding: 0em !important;
 }
 .spotlight-section .mainDetailButtons > .btnPlay:is(.emby-button) {
-	padding: 0.25em !important;
+	padding: 0.25em 1em !important;
+	display: flex;
+	flex-direction: row;
+}
+.spotlight-section .mainDetailButtons > .btnPlay:is(.emby-button)::after {
+	content: attr(title);
+	padding-right: 0.5em;
 }
 .spotlight-section .spotlight-buttons-container.mainDetailButtons {
     gap: 2em;
@@ -2294,10 +2308,6 @@ html.sleekfin-main-ui .emby-scroller-container[data-section-id="liveTv-channels"
 	text-shadow: none !important;
 }
 
-.spotlight-buttons-container .starRatingContainer {
-	margin-right: 1em !important;
-}
-
 .custom-scroller-container {
 	position: relative;
 	z-index: 1;
diff --git a/scripts/cardBuilder.js b/scripts/cardBuilder.js
index 1c02740..48617c5 100644
--- a/scripts/cardBuilder.js
+++ b/scripts/cardBuilder.js
@@ -1653,8 +1653,9 @@
         const controlsMount = titleContainer.querySelector('.section-controls');
         const titleLink = titleContainer.querySelector('a.sectionTitle-link');
         const sectionTitle = titleContainer.querySelector('.sectionTitle');
-        if (controlsMount) {
-            titleContainer.insertBefore(selectButton, controlsMount);
+        // controls may live under .sectionTitle-wrapper when a caption is present
+        if (controlsMount?.parentNode) {
+            controlsMount.parentNode.insertBefore(selectButton, controlsMount);
         } else if (titleLink?.parentNode) {
             titleLink.parentNode.insertBefore(selectButton, titleLink.nextSibling);
         } else if (sectionTitle?.parentNode) {