refactor: improved the way song items are displayed and content is cut off

frontend/src/components/ActivityItem.vue

@@ -259,7 +259,6 @@ export default {
 	.left-part {
 		flex: 1;
 		padding: 12px;
-		width: calc(100% - 150px);
 
 		.item-title {
 			margin: 0;

frontend/src/components/SearchQueryItem.vue

@@ -98,7 +98,7 @@ export default {
 	}
 
 	.thumbnail-and-info {
-		width: calc(100% - 160px);
+		min-width: 0;
 	}
 
 	.song-info {
@@ -106,7 +106,7 @@ export default {
 		flex-direction: column;
 		justify-content: center;
 		margin-left: 20px;
-		width: calc(100% - 65px);
+		min-width: 0;
 
 		.item-title {
 			font-size: 20px;

frontend/src/components/SongItem.vue

@@ -318,7 +318,7 @@ export default {
 	}
 
 	.thumbnail-and-info {
-		width: calc(100% - 90px);
+		min-width: 0;
 	}
 
 	.thumbnail {
@@ -333,7 +333,7 @@ export default {
 		flex-direction: column;
 		justify-content: center;
 		margin-left: 20px;
-		width: calc(100% - 10px);
+		min-width: 0;
 
 		*:not(i) {
 			margin: 0;
@@ -369,9 +369,5 @@ export default {
 	.edit-icon {
 		color: var(--primary-color);
 	}
-
-	&.with-duration .song-info {
-		width: calc(100% - 80px);
-	}
 }
 </style>

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -212,12 +212,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.youtube-tab .song-query-results .song-item .thumbnail-and-info {
-	width: calc(100% - 110px);
-}
-</style>
-
 <style lang="scss" scoped>
 .youtube-tab {
 	.song-query-results {

frontend/src/components/modals/EditSong/Tabs/Songs.vue

@@ -75,10 +75,6 @@ export default {
 		overflow: auto;
 
 		.search-query-item {
-			/deep/ .thumbnail-and-info {
-				width: calc(100% - 57px);
-			}
-
 			.icon-selected {
 				color: var(--green) !important;
 			}

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -96,10 +96,6 @@ export default {
 		overflow: auto;
 
 		.search-query-item {
-			/deep/ .thumbnail-and-info {
-				width: calc(100% - 59px);
-			}
-
 			.icon-selected {
 				color: var(--green) !important;
 			}

frontend/src/components/modals/ManageStation/Tabs/Songs.vue

@@ -455,21 +455,5 @@ export default {
 			margin: 0;
 		}
 	}
-
-	.musare-songs {
-		.song-item {
-			/deep/ .thumbnail-and-info {
-				width: calc(100% - 116px);
-			}
-		}
-	}
-
-	.youtube-songs {
-		.song-item {
-			/deep/ .thumbnail-and-info {
-				width: calc(100% - 57px);
-			}
-		}
-	}
 }
 </style>

frontend/src/components/modals/ManageStation/index.vue

@@ -652,9 +652,6 @@ export default {
 			margin-bottom: 10px;
 		}
 		.currently-playing.song-item {
-			.song-info {
-				width: calc(100% - 150px);
-			}
 			.thumbnail {
 				min-width: 130px;
 				width: 130px;

frontend/src/pages/Station/index.vue

@@ -2319,9 +2319,6 @@ export default {
 #currently-playing-container,
 #next-up-container {
 	.song-item {
-		.song-info {
-			width: calc(100% - 80px);
-		}
 		.thumbnail {
 			min-width: 130px;
 			width: 130px;