From a7f64e763f83d4f43ce9ce7c60ef465eb7299ee3 Mon Sep 17 00:00:00 2001
From: Florian Berthold <florian.berthold@sub-net.at>
Date: Sun, 15 Mar 2026 15:24:18 +0100
Subject: [PATCH] Move species image into right column detail card with
 attribution

---
 herbapi-ui/assets/herbapi.css   | 25 ++++---------
 herbapi-ui/src/pages/species.rs | 63 +++++++++++++++++----------------
 2 files changed, 38 insertions(+), 50 deletions(-)

diff --git a/herbapi-ui/assets/herbapi.css b/herbapi-ui/assets/herbapi.css
index fc3a017..24efca2 100644
--- a/herbapi-ui/assets/herbapi.css
+++ b/herbapi-ui/assets/herbapi.css
@@ -1165,32 +1165,19 @@ td.placeholder {
     color: #e65100;
 }
 
-/* Species header: title left, image right */
+/* Species / cultivar images inside detail cards */
 
-.species-header {
-    display: flex;
-    align-items: flex-start;
-    gap: 2rem;
-    margin-bottom: 1rem;
-}
-
-.species-header-text {
-    flex: 1;
-}
-
-/* Species / cultivar images */
-
-.species-image-wrap {
-    flex-shrink: 0;
+.image-card-body {
+    padding: 0.75rem;
+    text-align: center;
 }
 
 .species-image {
-    max-width: 280px;
-    max-height: 260px;
+    max-width: 100%;
+    max-height: 300px;
     width: auto;
     height: auto;
     border-radius: var(--radius);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
     object-fit: cover;
 }
 
diff --git a/herbapi-ui/src/pages/species.rs b/herbapi-ui/src/pages/species.rs
index d635262..1c1bf8e 100644
--- a/herbapi-ui/src/pages/species.rs
+++ b/herbapi-ui/src/pages/species.rs
@@ -554,37 +554,9 @@ pub fn SpeciesDetail(slug: String) -> Element {
                         .or_else(|| s.primary_image_key.clone());
 
                     rsx! {
-                        div { class: "species-header",
-                            div { class: "species-header-text",
-                                h1 { em { "{s.name_scientific}" } }
-                                if common_name != s.name_scientific {
-                                    p { class: "name-common", "{common_name}" }
-                                }
-                            }
-                            if let Some(ref key) = img_key {
-                                div { class: "species-image-wrap",
-                                    img { class: "species-image", src: "/img/{key}", alt: "{s.name_scientific}" }
-                                    if let Some(ref img) = primary_img {
-                                        div { class: "image-attribution",
-                                            if let Some(ref caption) = img.caption {
-                                                span { "{caption}" }
-                                            }
-                                            if let Some(ref lic) = img.license {
-                                                if img.caption.is_some() {
-                                                    " | "
-                                                }
-                                                span { "{lic}" }
-                                            }
-                                            if let Some(ref url) = img.source_url {
-                                                if img.caption.is_some() || img.license.is_some() {
-                                                    " | "
-                                                }
-                                                a { href: "{url}", target: "_blank", class: "attribution-link", "Source" }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
+                        h1 { em { "{s.name_scientific}" } }
+                        if common_name != s.name_scientific {
+                            p { class: "name-common", "{common_name}" }
                         }
 
                         div { class: "detail-row",
@@ -690,6 +662,35 @@ pub fn SpeciesDetail(slug: String) -> Element {
                             // === RIGHT COLUMN ===
                             div { class: "detail-col",
 
+                                // Image card
+                                if let Some(ref key) = img_key {
+                                    div { class: "detail-card",
+                                        div { class: "detail-card-header", "Image" }
+                                        div { class: "image-card-body",
+                                            img { class: "species-image", src: "/img/{key}", alt: "{s.name_scientific}" }
+                                            if let Some(ref img) = primary_img {
+                                                div { class: "image-attribution",
+                                                    if let Some(ref caption) = img.caption {
+                                                        span { "{caption}" }
+                                                    }
+                                                    if let Some(ref lic) = img.license {
+                                                        if img.caption.is_some() {
+                                                            " | "
+                                                        }
+                                                        span { "{lic}" }
+                                                    }
+                                                    if let Some(ref url) = img.source_url {
+                                                        if img.caption.is_some() || img.license.is_some() {
+                                                            " | "
+                                                        }
+                                                        a { href: "{url}", target: "_blank", class: "attribution-link", "Source" }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+
                                 // Card 4: Growing Requirements
                                 div { class: "detail-card",
                                     div { class: "detail-card-header", "Growing Requirements" }