Still converting to bootstrap 5

approot/release.xml

@@ -8,17 +8,17 @@
 
 <message id="Lms.Explore.Release.template">
 	<div class="row mb-3">
-		<div class="col-md-4">
+		<div class="col-lg-4">
 			${cover class="Lms-explore-release-cover"}
 		</div>
-		<div class="col-md-8">
+		<div class="col-lg-8">
 			<div class="mb-3">
 				${name}
 				${<if-has-release-artists>}${artists}${</if-has-release-artists>}
 				${<if-has-various-release-artists>}${tr:Lms.Explore.various-artists}${</if-has-various-release-artists>}
-				<small>${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}</small>
+				${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}
 				${clusters class="mb-2"}
-				${play-btn class="me-2"}${more-btn}
+				${play-btn class="btn btn-dark me-2"}${more-btn class="btn btn-dark"}
 			</div>
 			${container class="d-grid gap-3"}
 		</div>
@@ -55,27 +55,21 @@
 </message>
 
 <message id="Lms.Explore.Release.template.entry">
-	<div class="row ${is-playing} align-items-center">
-		<div class="col-1 col-sm-1 text-end">
+	<div class="d-flex align-items-center">
+		<div class="p-2 text-muted text-end" style="min-width: 2.1rem;">
 			${<if-has-track-number>}${track-number}${</if-has-track-number>}
 		</div>
-		<div class="col-7 col-sm-9">
+		<div class="p-2 flex-fill">
 			${name}
-			${<if-has-artists>}${artists}${</if-has-artists>}
+				${<if-has-artists>}<div><div style="display: inline-block;" onclick="Wt.stopPropagation(event)">${artists}</div></div>${</if-has-artists>}
 		</div>
-		<div class="col-4 col-sm-2">
-			<div class="Lms-explore-release-entry-controls">
-				${play-btn class="me-2"}${more-btn}
-			</div>
-			<div class="Lms-explore-release-entry-track-duration">
-				${duration}
-			</div>
+		<div class="p-2 d-none d-sm-block text-muted">
+			${duration}
+		</div>
+		<div class="p-2" onclick="Wt.stopPropagation(event)">
+			${more-btn class="btn btn-sm btn-outline-secondary border-0"}
 		</div>
 	</div>
 </message>
 
-<message id="Lms.Explore.Release.template.entry-artist">
-	${artist}
-</message>
-
 </messages>