From 400316f6222490e0d1bd57c7780d48d49bda292c Mon Sep 17 00:00:00 2001
From: Bendik Aagaard Lynghaug <bendik.lynghaug@gmail.com>
Date: Thu, 6 Aug 2026 13:03:43 +0200
Subject: [PATCH] Inline encouragements with the submit button, vertically
 centered

Was stacked vertically; now a row (encouragements left, button right,
center-aligned), falling back to the stacked layout under 640px where
a row would get cramped.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app.rs     | 12 +++++++-----
 style/main.css | 14 +++++++++++---
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/app.rs b/src/app.rs
index 28454ae..4eb41b4 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -770,11 +770,13 @@ fn AlternativeCard(
                 .then(|| {
                     view! {
                         <div class="alt-cta">
-                            <For
-                                each=move || alternative.encouragements.clone()
-                                key=|e| e.clone()
-                                children=move |e| view! { <p class="alt-encouragement">{e}</p> }
-                            />
+                            <div class="alt-encouragements">
+                                <For
+                                    each=move || alternative.encouragements.clone()
+                                    key=|e| e.clone()
+                                    children=move |e| view! { <p class="alt-encouragement">{e}</p> }
+                                />
+                            </div>
                             <form on:submit=on_submit>
                                 <button
                                     type="submit"
diff --git a/style/main.css b/style/main.css
index a2ae5f2..bb0afb2 100644
--- a/style/main.css
+++ b/style/main.css
@@ -222,12 +222,19 @@ main.loading, main.not-found {
 
 .alt-cta {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.4rem;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.2rem;
   margin-top: 1.4rem;
 }
 
+.alt-encouragements {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
 .features { display: grid; gap: 1.1rem; margin-top: 0.6rem; }
 
 .feature h3 { font-size: 1rem; margin-bottom: 0.15em; }
@@ -490,4 +497,5 @@ input:focus, textarea:focus {
 @media (max-width: 640px) {
   .hero { padding: 3rem 1.25rem 2rem; }
   .alt-card { padding: 1.4rem 1.3rem; }
+  .alt-cta { flex-direction: column; align-items: flex-start; }
 }