fix(MediaItem): Thumbnail has inconsistent margins and content falling beneath

frontend/src/components/MediaItem.vue

@@ -432,80 +432,72 @@ onUnmounted(() => {
 	}
 
 	.thumbnail-and-info {
-		min-width: 0;
-
-		min-height: 70px;
 		position: relative;
-	}
-
-	.thumbnail {
-		min-width: 70px;
-		width: 70px;
-		margin: -7.5px;
-		margin-right: calc(20px - 7.5px);
-
 		height: calc(100% + 15px);
-		position: absolute;
-	}
-
-	:deep(.left-icon),
-	.left-icon {
-		margin-left: 70px;
-	}
-
-	.song-info:not(:nth-child(3)) {
-		margin-left: 70px;
-	}
-
-	.song-info {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		margin-left: 10px;
 		min-width: 0;
 
-		*:not(i) {
-			margin: 0;
-			font-family: Nunito, Arial, sans-serif;
+		.thumbnail {
+			position: relative;
+			height: 100%;
+			min-width: 70px;
+			width: 70px;
+			margin-left: -7.5px;
+			margin-right: 7.5px;
 		}
 
-		h6 {
-			color: var(--primary-color) !important;
-			font-weight: bold;
-			font-size: 17px;
-			margin-bottom: 5px;
+		:deep(.left-icon) {
+			margin-right: 7.5px;
 		}
 
-		.song-title {
+		.song-info {
 			display: flex;
-			flex-direction: row;
+			flex-direction: column;
+			justify-content: center;
+			min-width: 0;
 
-			.item-title {
-				font-size: 18px;
+			*:not(i) {
+				margin: 0;
+				font-family: Nunito, Arial, sans-serif;
 			}
 
-			.verified-song {
-				margin-left: 5px;
+			h6 {
+				color: var(--primary-color) !important;
+				font-weight: bold;
+				font-size: 17px;
+				margin-bottom: 5px;
 			}
 
-			.item-title.no-artists {
-				display: -webkit-inline-box;
-				font-size: 16px;
-				white-space: normal;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 2;
+			.song-title {
+				display: flex;
+				flex-direction: row;
+
+				.item-title {
+					font-size: 18px;
+				}
+
+				.verified-song {
+					margin-left: 5px;
+				}
+
+				.item-title.no-artists {
+					display: -webkit-inline-box;
+					font-size: 16px;
+					white-space: normal;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+				}
 			}
-		}
 
-		.item-description {
-			line-height: 120%;
-		}
+			.item-description {
+				line-height: 120%;
+			}
 
-		.song-request-time {
-			font-size: 11px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+			.song-request-time {
+				font-size: 11px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 		}
 	}
 

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

@@ -645,16 +645,11 @@ onBeforeUnmount(() => {
 		margin-top: 10px;
 	}
 	.currently-playing.song-item {
-		height: 130px;
+		height: 130px !important;
 
-		.thumbnail {
+		.thumbnail-and-info .thumbnail {
 			min-width: 130px;
 			width: 130px;
-			height: 130px;
-		}
-
-		.song-info {
-			margin-left: 130px;
 		}
 	}
 }

frontend/src/components/modals/Report.vue

@@ -466,14 +466,9 @@ onMounted(() => {
 .report-modal .song-item {
 	height: 130px !important;
 
-	.thumbnail {
+	.thumbnail-and-info .thumbnail {
 		min-width: 130px;
 		width: 130px;
-		height: 130px;
-	}
-
-	.song-info {
-		margin-left: 130px !important;
 	}
 }
 </style>

frontend/src/pages/Station/Sidebar/History.vue

@@ -186,16 +186,12 @@ onMounted(async () => {});
 	}
 
 	:deep(.song-item) {
-		height: 90px;
+		min-height: 90px !important;
+		height: 100% !important;
 
-		.thumbnail {
+		.thumbnail-and-info .thumbnail {
 			min-width: 90px;
 			width: 90px;
-			height: 90px;
-		}
-
-		.song-info {
-			margin-left: 90px;
 		}
 	}
 }

frontend/src/pages/Station/index.vue

@@ -2889,16 +2889,11 @@ onBeforeUnmount(() => {
 #currently-playing-container,
 #next-up-container {
 	.song-item {
-		min-height: 130px;
+		height: 130px !important;
 
-		.thumbnail {
+		.thumbnail-and-info .thumbnail {
 			min-width: 130px;
 			width: 130px;
-			height: 130px;
-		}
-
-		.song-info {
-			margin-left: 130px;
 		}
 	}
 }