lfg2025/deepstock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stack the affiliate button full-width on mobile rec items

Browse Source 
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>
This commit is contained in:
Dorian
2026-05-10 10:52:40 +01:00
parent 78cfb14a77
commit 8f74118a28
2 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -1426,7 +1426,7 @@ function showScenario(n) {
html += `<div class="rec-item"> html += `<div class="rec-item">
<div class="item-name">${item.name[currentLang]}</div> <div class="item-name">${item.name[currentLang]}</div>
<div class="item-why">${item.why[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> <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>` : ''} ${item.link ? `<a class="affiliate-btn" href="${item.link}" target="_blank" rel="noopener noreferrer">${icon('cart', 14)} ${viewTxt}</a>` : ''}
</div> </div>

23
src/styles.css
View File

@@ -711,6 +711,16 @@ input[type=range]::-moz-range-thumb {
.item-name { font-weight: 600; font-size: 15px; color: var(--text); } .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-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); } .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 { .affiliate-btn {
display: inline-flex; align-items: center; gap: 6px; display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; padding: 8px 14px;
@@ -723,6 +733,19 @@ input[type=range]::-moz-range-thumb {
transition: var(--trans); width: fit-content; transition: var(--trans); width: fit-content;
} }
.affiliate-btn:hover { background: rgba(0,0,0,0.08); } .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 /* Budget meter — same logic as the rec-cards: text flips to dark since
the .result-panel underneath is white-paint. The .budget-meter wrapper the .result-panel underneath is white-paint. The .budget-meter wrapper