From d20989f8597e504a3300b5f60d3b81fcd73cde53 Mon Sep 17 00:00:00 2001
From: Connor Johnstone <connor.johnstone@arcfield.com>
Date: Wed, 25 Mar 2026 14:40:17 -0400
Subject: [PATCH] better artist banner heights

---
 frontend/src/pages/artist.rs |  7 +++----
 frontend/style.css           | 26 ++++++++++++++++++++------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/artist.rs b/frontend/src/pages/artist.rs
index 29d101c..526dddc 100644
--- a/frontend/src/pages/artist.rs
+++ b/frontend/src/pages/artist.rs
@@ -253,10 +253,8 @@ pub fn artist_page(props: &Props) -> Html {
 
     html! {
         <div>
-            if let Some(ref banner) = d.artist_banner {
-                <div class="artist-banner" style={format!("background-image: url('{banner}')")}>
-                </div>
-            }
+            <div class={if d.artist_banner.is_some() { "artist-banner-wrap" } else { "" }}
+                style={d.artist_banner.as_ref().map(|b| format!("background-image: url('{b}')")).unwrap_or_default()}>
             <div class="page-header">
                 <div class="flex items-center justify-between">
                     <div class="flex gap-2 items-center">
@@ -329,6 +327,7 @@ pub fn artist_page(props: &Props) -> Html {
                     <p class="text-sm text-muted loading">{ "Loading track counts..." }</p>
                 }
             </div>
+            </div> // close artist-banner-wrap
 
             if let Some(ref msg) = *message {
                 <div class="card" style="border-color: var(--success);">
diff --git a/frontend/style.css b/frontend/style.css
index 572ea72..09b6d6e 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -148,13 +148,27 @@ a:hover { color: var(--accent-hover); }
     color: var(--text-secondary);
 }
 .artist-links a:hover { color: var(--accent); }
-.artist-banner {
-    width: 100%;
-    height: 200px;
-    background-size: cover;
-    background-position: center;
+.artist-banner-wrap {
+    background-size: 100% auto;
+    background-position: top center;
+    background-repeat: no-repeat;
     border-radius: var(--radius);
-    margin-bottom: 1rem;
+    margin: -2rem -2rem 1rem -2rem;
+    padding: 2rem;
+    padding-top: 30%;
+    position: relative;
+}
+.artist-banner-wrap::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, rgba(15,23,42,0.4) 0%, rgba(15,23,42,0.85) 60%, rgba(15,23,42,0.95) 100%);
+    border-radius: var(--radius);
+    pointer-events: none;
+}
+.artist-banner-wrap > * {
+    position: relative;
+    z-index: 1;
 }
 .artist-photo {
     width: 120px;