+
@if (hasGenre)
{
diff --git a/DeepDrftPublic.Client/Pages/MixDetail.razor.css b/DeepDrftPublic.Client/Pages/MixDetail.razor.css
index b544b40..0f0b971 100644
--- a/DeepDrftPublic.Client/Pages/MixDetail.razor.css
+++ b/DeepDrftPublic.Client/Pages/MixDetail.razor.css
@@ -3,3 +3,13 @@
position: relative;
z-index: 1;
}
+
+/* Medium square cover — deliberately smaller than the 360px cut cover so the
+ waveform backdrop keeps room. The placeholder/art MudPaper fills this frame. */
+.mix-detail-cover {
+ aspect-ratio: 1 / 1;
+ max-width: 220px;
+ margin: 0 auto 2rem;
+ overflow: hidden;
+ box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
+}
diff --git a/DeepDrftPublic.Client/Pages/SessionDetail.razor b/DeepDrftPublic.Client/Pages/SessionDetail.razor
index 10efeea..b83930d 100644
--- a/DeepDrftPublic.Client/Pages/SessionDetail.razor
+++ b/DeepDrftPublic.Client/Pages/SessionDetail.razor
@@ -37,6 +37,10 @@ else
var heroKey = release.SessionMetadata?.HeroImageEntryKey;
// Hero image precedence: the session's dedicated hero, then the release cover, then a placeholder.
var heroImage = !string.IsNullOrEmpty(heroKey) ? heroKey : release.ImagePath;
+ // Show the cover thumbnail only when it differs from what the hero displays. When there is no
+ // dedicated hero, the hero already falls back to release.ImagePath — rendering the cover too
+ // would duplicate the same image.
+ var showCover = !string.IsNullOrEmpty(release.ImagePath) && release.ImagePath != heroImage;
var hasGenre = release.Genre is not null;
var hasDate = release.ReleaseDate is not null;
@@ -60,6 +64,13 @@ else
}
+ @if (showCover)
+ {
+
+
+
+ }
@if (hasGenre)
diff --git a/DeepDrftPublic.Client/Pages/SessionDetail.razor.css b/DeepDrftPublic.Client/Pages/SessionDetail.razor.css
index 1c63a14..59aa8b4 100644
--- a/DeepDrftPublic.Client/Pages/SessionDetail.razor.css
+++ b/DeepDrftPublic.Client/Pages/SessionDetail.razor.css
@@ -12,3 +12,13 @@
background-position: center;
background-repeat: no-repeat;
}
+
+/* Secondary medium square cover sitting below the hero — same 220px frame as mix detail,
+ smaller than the cut cover so the hero stays dominant. The cover-art MudPaper fills it. */
+.session-detail-cover {
+ aspect-ratio: 1 / 1;
+ max-width: 220px;
+ margin: 0 auto 2rem;
+ overflow: hidden;
+ box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
+}