From 8f74118a28f364ac71d3b60d92720a908ba41659 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sun, 10 May 2026 10:52:40 +0100
Subject: [PATCH] fix: stack the affiliate button full-width on mobile rec
 items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced the inline-styled cost + button row inside each .rec-item with
a .rec-item-foot class so it can respond to media queries. Desktop
(>=768px) keeps the existing layout — cost left, button right via
space-between. Mobile (<768px) breaks the button onto its own row
beneath the cost and stretches it to full width with chunkier vertical
padding for a comfortable tap target.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/App.vue    |  2 +-
 src/styles.css | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index b72ab17..d30f484 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1426,7 +1426,7 @@ function showScenario(n) {
       html += `<div class="rec-item">
         <div class="item-name">${item.name[currentLang]}</div>
         <div class="item-why">${item.why[currentLang]}</div>
-        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
+        <div class="rec-item-foot">
           <div class="item-cost">${item.cost}</div>
           ${item.link ? `<a class="affiliate-btn" href="${item.link}" target="_blank" rel="noopener noreferrer">${icon('cart', 14)} ${viewTxt}</a>` : ''}
         </div>
diff --git a/src/styles.css b/src/styles.css
index f0ed921..02f9971 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -711,6 +711,16 @@ input[type=range]::-moz-range-thumb {
 .item-name { font-weight: 600; font-size: 15px; color: var(--text); }
 .item-why { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
 .item-cost { font-family: var(--font-mono); font-size: 13px; color: var(--green-bright); }
+/* Cost + affiliate-btn footer row inside each rec-item. Default (desktop)
+   is the cost on the left and the button on the right; on mobile the
+   button drops to its own row at full width — easier tap target. */
+.rec-item-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
 .affiliate-btn {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 14px;
@@ -723,6 +733,19 @@ input[type=range]::-moz-range-thumb {
   transition: var(--trans); width: fit-content;
 }
 .affiliate-btn:hover { background: rgba(0,0,0,0.08); }
+@media (max-width: 767px) {
+  /* Mobile — break the button onto its own row beneath the cost and let
+     it fill the rec-item width. flex-wrap on the parent does the line
+     break; flex-basis: 100% guarantees the row split even when the cost
+     is short. */
+  .rec-item-foot .affiliate-btn {
+    flex: 0 0 100%;
+    width: 100%;
+    justify-content: center;
+    padding: 12px 14px;
+    margin-top: 4px;
+  }
+}
 
 /* Budget meter — same logic as the rec-cards: text flips to dark since
    the .result-panel underneath is white-paint. The .budget-meter wrapper