From 182aa9fa9aed3a1de00a62f2722b67137c28ce13 Mon Sep 17 00:00:00 2001
From: AdrianoDev <adrianodalpastro@gmail.com>
Date: Tue, 19 May 2026 09:24:36 +0200
Subject: [PATCH] feat(ui): recipe thumbnail su Select Recipe + fit
 (object-contain) su Gestione Ricette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- /measure/select: aggiunta miniatura 64×64 accanto al nome ricetta
  (object-contain per mantenere l'immagine intera, non croppata).
  Lo schema backend RecipeSummary esponeva solo id/code/name/active:
  aggiunti image_path e description così la card può rendere thumb
  e sottotitolo.
- /maker/recipes: la miniatura passa da object-cover (crop) a
  object-contain (fit), per visualizzare l'intera immagine della
  ricetta senza tagli.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/backend/models/api/station.py             |  2 ++
 .../templates/maker/recipe_list.html          |  6 ++--
 .../templates/measure/select_recipe.html      | 31 ++++++++++++++-----
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/backend/models/api/station.py b/src/backend/models/api/station.py
index 7b0c6b0..80c25fd 100644
--- a/src/backend/models/api/station.py
+++ b/src/backend/models/api/station.py
@@ -51,6 +51,8 @@ class RecipeSummary(BaseModel):
     code: str
     name: str
     active: bool
+    image_path: Optional[str] = None
+    description: Optional[str] = None
 
 
 class StationWithRecipesResponse(StationResponse):
diff --git a/src/frontend/flask_app/templates/maker/recipe_list.html b/src/frontend/flask_app/templates/maker/recipe_list.html
index 1b0e9ea..e787cc2 100644
--- a/src/frontend/flask_app/templates/maker/recipe_list.html
+++ b/src/frontend/flask_app/templates/maker/recipe_list.html
@@ -152,11 +152,11 @@
         <div class="p-5 sm:p-6">
           <!-- Card Header -->
           <div class="flex flex-col sm:flex-row sm:items-start gap-4 mb-4">
-            <!-- Thumbnail -->
+            <!-- Thumbnail (fit, no crop) -->
             <template x-if="recipe.image_path">
-              <div class="w-20 h-20 rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)] shrink-0">
+              <div class="w-20 h-20 rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)] shrink-0 flex items-center justify-center">
                 <img :src="'/maker/api/files/' + recipe.image_path"
-                     class="w-full h-full object-cover"
+                     class="max-w-full max-h-full object-contain"
                      loading="lazy"
                      onerror="this.parentElement.style.display='none'">
               </div>
diff --git a/src/frontend/flask_app/templates/measure/select_recipe.html b/src/frontend/flask_app/templates/measure/select_recipe.html
index 22f601a..979c2d4 100644
--- a/src/frontend/flask_app/templates/measure/select_recipe.html
+++ b/src/frontend/flask_app/templates/measure/select_recipe.html
@@ -157,15 +157,30 @@
             </span>
           </div>
 
-          <!-- Recipe Name -->
-          <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2 leading-snug"
-              x-text="recipe.name">
-          </h3>
+          <!-- Title + Thumbnail row -->
+          <div class="flex items-start gap-3 mb-2">
+            <!-- Thumbnail (fit, no crop) -->
+            <template x-if="recipe.image_path">
+              <div class="w-16 h-16 rounded-md overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)] shrink-0 flex items-center justify-center">
+                <img :src="'/measure/api/files/' + recipe.image_path"
+                     class="max-w-full max-h-full object-contain"
+                     loading="lazy"
+                     onerror="this.parentElement.style.display='none'">
+              </div>
+            </template>
 
-          <!-- Description -->
-          <p class="text-sm text-[var(--text-secondary)] line-clamp-2 leading-relaxed"
-             x-text="recipe.description || '{{ _('Nessuna descrizione disponibile') }}'">
-          </p>
+            <div class="min-w-0 flex-1">
+              <!-- Recipe Name -->
+              <h3 class="text-lg font-semibold text-[var(--text-primary)] leading-snug"
+                  x-text="recipe.name">
+              </h3>
+
+              <!-- Description -->
+              <p class="mt-1 text-sm text-[var(--text-secondary)] line-clamp-2 leading-relaxed"
+                 x-text="recipe.description || '{{ _('Nessuna descrizione disponibile') }}'">
+              </p>
+            </div>
+          </div>
 
           <!-- Meta Info -->
           <div class="mt-4 flex items-center gap-3 text-xs text-[var(--text-muted)]">