From 1554212bc4f4b9ad57b3abd607aa7234fff01c8f Mon Sep 17 00:00:00 2001
From: mwisnowski <93788087+mwisnowski@users.noreply.github.com>
Date: Sun, 5 Apr 2026 20:07:40 -0700
Subject: [PATCH] fix: card hover preview broken for example cards in theme
 browser

---
 CHANGELOG.md                                   | 2 +-
 RELEASE_NOTES_TEMPLATE.md                      | 2 +-
 code/web/templates/themes/detail_fragment.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81c14e3..146d8a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@ _No unreleased changes yet_
 _No unreleased changes yet_
 
 ### Fixed
-_No unreleased changes yet_
+- **Card hover preview in theme browser (#70)**: Example card thumbnails in the theme detail/browser page were showing the wrong card image (a fuzzy search for "Card") when hovered. The `<img>` elements inside `.ex-card` containers lacked `data-card-name` attributes, so the hover system fell back to the literal string "Card". Added `data-card-name`, `data-original-name`, `data-role`, and `data-tags` to example card `<img>` elements in `detail_fragment.html` to match the existing commander image pattern.
 
 ### Removed
 _No unreleased changes yet_
diff --git a/RELEASE_NOTES_TEMPLATE.md b/RELEASE_NOTES_TEMPLATE.md
index 5d67c30..fd05d5d 100644
--- a/RELEASE_NOTES_TEMPLATE.md
+++ b/RELEASE_NOTES_TEMPLATE.md
@@ -8,7 +8,7 @@ _No unreleased changes yet_
 _No unreleased changes yet_
 
 ### Fixed
-_No unreleased changes yet_
+- Card hover preview now works correctly for example cards in the theme browser
 
 ### Removed
 _No unreleased changes yet_
diff --git a/code/web/templates/themes/detail_fragment.html b/code/web/templates/themes/detail_fragment.html
index 8312449..80fcffd 100644
--- a/code/web/templates/themes/detail_fragment.html
+++ b/code/web/templates/themes/detail_fragment.html
@@ -185,7 +185,7 @@
         {% for c in theme.example_cards %}
         {% set base_c = (c.split(' - Synergy (')[0] if ' - Synergy (' in c else c) %}
         <div class="ex-card text-center" style="position:relative" data-card-name="{{ base_c }}" data-role="example_card" data-tags="{{ theme.synergies|join(', ') }}" data-original-name="{{ c }}">
-          <img class="card-thumb w-full h-auto border border-[var(--border)] rounded-[10px]" loading="lazy" decoding="async" alt="{{ c }} image" src="{{ base_c|card_image('small') }}" />
+          <img class="card-thumb w-full h-auto border border-[var(--border)] rounded-[10px]" loading="lazy" decoding="async" alt="{{ c }} image" src="{{ base_c|card_image('small') }}" data-card-name="{{ base_c }}" data-original-name="{{ c }}" data-role="example_card" data-tags="{{ theme.synergies|join(', ') }}" />
           <div class="card-price-overlay" data-price-for="{{ base_c }}" aria-hidden="true"></div>
           <div class="text-[11px] mt-1 whitespace-nowrap overflow-hidden text-ellipsis font-semibold card-ref" data-card-name="{{ base_c }}" data-tags="{{ theme.synergies|join(', ') }}" data-original-name="{{ c }}">{{ c }}</div>
         </div>