fix: make the lyrics provider container scrollable

Author: ianz56

CustomApps/lyrics-plus/style.css

@@ -93,6 +93,7 @@
 	/* 2 padding blocks & 1 line height & Provider block */
 	height: calc(50vh - 91px - 8px - var(--lyrics-font-size));
 }
+
 .lyrics-lyricsContainer-UnsyncedLyricsPage:has(.lyrics-versionSelector, .lyrics-lyricsContainer-LyricsLine:nth-child(4))
 	.lyrics-lyricsContainer-LyricsUnsyncedPadding {
 	height: 10vh;
@@ -120,11 +121,14 @@
 	grid-area: 2 / 1 / -1 / -1;
 	justify-self: stretch;
 	height: 25px;
-	overflow: hidden;
+	overflow-x: auto;
+	overflow-y: hidden;
 	background: linear-gradient(0deg, var(--lyrics-color-background) 30%, transparent);
 	z-index: 1;
 	padding: 60px 20px 30px;
-	pointer-events: none;
+	pointer-events: auto;
+	scrollbar-width: none;
+	white-space: nowrap;
 }
 
 .lyrics-lyricsContainer-SyncedLyrics {
@@ -437,6 +441,7 @@ div.lyrics-tabBar-headerItemLink {
 	background-color: var(--lyrics-color-active);
 	color: var(--lyrics-highlight-background);
 }
+
 .lyrics-versionSelector option {
 	background-color: var(--lyrics-color-active);
 }
@@ -456,24 +461,28 @@ div.lyrics-tabBar-headerItemLink {
 	display: table;
 	clear: both;
 }
+
 .lyrics-tooltip-wrapper .setting-row .col,
 #lyrics-plus-config-container .setting-row .col {
 	padding: 16px 0 4px;
 	align-items: center;
 }
+
 .lyrics-tooltip-wrapper .setting-row .col.description,
 #lyrics-plus-config-container .setting-row .col.description {
 	float: left;
 	padding-right: 15px;
 	cursor: default;
 }
+
 .lyrics-tooltip-wrapper .setting-row .col.action,
 #lyrics-plus-config-container .setting-row .col.action {
 	float: right;
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
 }
+
 .lyrics-tooltip-wrapper button.switch,
 #lyrics-plus-config-container button.switch {
 	align-items: center;
@@ -487,12 +496,14 @@ div.lyrics-tabBar-headerItemLink {
 	width: 32px;
 	height: 32px;
 }
+
 .lyrics-tooltip-wrapper button.switch.disabled,
 .lyrics-tooltip-wrapper button.switch[disabled],
 #lyrics-plus-config-container button.switch.disabled,
 #lyrics-plus-config-container button.switch[disabled] {
 	color: rgba(var(--spice-rgb-text), 0.3);
 }
+
 .lyrics-tooltip-wrapper button.switch.small,
 #lyrics-plus-config-container button.switch.small {
 	width: 22px;
@@ -511,6 +522,7 @@ div.lyrics-tabBar-headerItemLink {
 	background-color: initial;
 	border-bottom: 1px solid var(--spice-text);
 }
+
 .lyrics-tooltip-wrapper .col.action .adjust-value,
 #lyrics-plus-config-container .col.action .adjust-value {
 	margin-inline-start: 12px;
@@ -523,6 +535,7 @@ div.lyrics-tabBar-headerItemLink {
 	font-size: 14px;
 	opacity: 0.8;
 }
+
 .lyrics-tooltip-wrapper .col.action .btn,
 #lyrics-plus-config-container .col.action .btn {
 	font-weight: 700;
@@ -548,6 +561,7 @@ div.lyrics-tabBar-headerItemLink {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
+
 .lyrics-tooltip-wrapper .col.action .main-dropDown-dropDown,
 .lyrics-tooltip-wrapper .col.action input,
 #lyrics-plus-config-container .col.action .main-dropDown-dropDown,
@@ -630,6 +644,7 @@ div.lyrics-tabBar-headerItemLink {
 	width: var(--lyrics-font-size);
 	transform: scale(0.5);
 }
+
 .lyrics-idling-indicator__circle.active {
 	opacity: 1;
 	transform: scale(0.7);
@@ -656,6 +671,7 @@ div.lyrics-tabBar-headerItemLink {
 	0% {
 		-webkit-transform: rotate(0deg);
 	}
+
 	100% {
 		-webkit-transform: rotate(360deg);
 	}
@@ -685,24 +701,30 @@ div.lyrics-tabBar-headerItemLink {
 .lyrics-lyricsContainer-UnsyncedLyricsPage .split {
 	display: flex;
 }
+
 .lyrics-lyricsContainer-UnsyncedLyricsPage .split > div {
 	flex: 50%;
 }
+
 .lyrics-lyricsContainer-UnsyncedLyricsPage .split > div > div:not(.lyrics-versionSelector) {
 	margin-left: 0;
 	margin-right: 0;
 }
+
 .split .lyrics-lyricsContainer-LyricsLine {
 	padding-left: 50px;
 	padding-right: 50px;
 }
+
 .split .lyrics-versionSelector {
 	margin-right: 50px;
 	margin-left: 50px;
 }
+
 .split .lyrics-versionSelector select {
 	width: 100%;
 }
+
 .main-content-view {
 	height: 100%;
 }
@@ -712,6 +734,7 @@ div.lyrics-tabBar-headerItemLink {
 		padding-left: 75px;
 		padding-right: 75px;
 	}
+
 	.split .lyrics-versionSelector {
 		margin-right: 75px;
 		margin-left: 75px;
@@ -723,6 +746,7 @@ div.lyrics-tabBar-headerItemLink {
 		padding-left: 100px;
 		padding-right: 100px;
 	}
+
 	.split .lyrics-versionSelector {
 		margin-right: 100px;
 		margin-left: 100px;