fix(CurrentlyPlaying): song title/artists now truncated with ellipsis to 1 line each

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -26,10 +26,15 @@
 				<h4
 					id="song-title"
 					:style="!song.artists ? { fontSize: '17px' } : null"
+					:title="song.title"
 				>
 					{{ song.title }}
 				</h4>
-				<h5 id="song-artists" v-if="song.artists">
+				<h5
+					id="song-artists"
+					v-if="song.artists"
+					:title="song.artists.join(', ')"
+				>
 					{{ song.artists.join(", ") }}
 				</h5>
 				<p
@@ -157,10 +162,10 @@ export default {
 
 	#song-info {
 		display: flex;
-		flex-direction: row;
+		flex-direction: column;
 		flex-wrap: wrap;
 		margin-left: 20px;
-		width: 100%;
+		width: calc(100% - 130px - 20px);
 		height: 100%;
 
 		*:not(i) {
@@ -173,6 +178,8 @@ export default {
 			justify-content: center;
 			flex-direction: column;
 			flex-grow: 1;
+			width: 100%;
+
 			h6 {
 				color: var(--primary-color) !important;
 				font-weight: bold;
@@ -182,11 +189,17 @@ export default {
 			#song-title {
 				margin-top: 7px;
 				font-size: 22px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 
 			#song-artists {
 				font-size: 16px;
 				margin-bottom: 5px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 
 			#song-request-time {

frontend/src/pages/Station/index.vue

@@ -1945,6 +1945,7 @@ export default {
 		#current-next-row {
 			display: flex;
 			flex-direction: row;
+			max-width: calc(100vw - 40px);
 
 			#currently-playing-container,
 			#next-up-container {