From 5155d930b7f36c9fa04386ba79721d2946fdf127 Mon Sep 17 00:00:00 2001
From: Florian Berthold <florian.berthold@sub-net.at>
Date: Sun, 15 Mar 2026 15:21:35 +0100
Subject: [PATCH] Move species image to right of header (flex layout)

---
 herbapi-ui/assets/herbapi.css   | 19 ++++++++++---
 herbapi-ui/src/pages/species.rs | 47 ++++++++++++++++++---------------
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/herbapi-ui/assets/herbapi.css b/herbapi-ui/assets/herbapi.css
index 11d0731..fc3a017 100644
--- a/herbapi-ui/assets/herbapi.css
+++ b/herbapi-ui/assets/herbapi.css
@@ -1165,15 +1165,28 @@ td.placeholder {
     color: #e65100;
 }
 
+/* Species header: title left, image right */
+
+.species-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 2rem;
+    margin-bottom: 1rem;
+}
+
+.species-header-text {
+    flex: 1;
+}
+
 /* Species / cultivar images */
 
 .species-image-wrap {
-    margin: 1rem 0 0.5rem;
+    flex-shrink: 0;
 }
 
 .species-image {
-    max-width: 360px;
-    max-height: 320px;
+    max-width: 280px;
+    max-height: 260px;
     width: auto;
     height: auto;
     border-radius: var(--radius);
diff --git a/herbapi-ui/src/pages/species.rs b/herbapi-ui/src/pages/species.rs
index a0bfc27..d635262 100644
--- a/herbapi-ui/src/pages/species.rs
+++ b/herbapi-ui/src/pages/species.rs
@@ -554,30 +554,33 @@ pub fn SpeciesDetail(slug: String) -> Element {
                         .or_else(|| s.primary_image_key.clone());
 
                     rsx! {
-                        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() {
-                                                " | "
+                        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}" }
                                             }
-                                            span { "{lic}" }
-                                        }
-                                        if let Some(ref url) = img.source_url {
-                                            if img.caption.is_some() || img.license.is_some() {
-                                                " | "
+                                            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" }
                                             }
-                                            a { href: "{url}", target: "_blank", class: "attribution-link", "Source" }
                                         }
                                     }
                                 }