From f1c7a2829691194e98de030f3fe9a475465fe236 Mon Sep 17 00:00:00 2001
From: AdrianoDev <adrianodalpastro@gmail.com>
Date: Mon, 18 May 2026 19:19:40 +0200
Subject: [PATCH] style(admin/stations): use bordered cards instead of divide-y
 rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le liste "Ricette disponibili" e "Assegnate alla stazione" passano da
una lista con separatori interni (divide-y) a card individuali con
bordo arrotondato e spaziatura: migliora la leggibilità e la
percezione di trascinabilità dei singoli elementi.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/frontend/flask_app/templates/admin/stations.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/flask_app/templates/admin/stations.html b/src/frontend/flask_app/templates/admin/stations.html
index ba29d99..4247922 100644
--- a/src/frontend/flask_app/templates/admin/stations.html
+++ b/src/frontend/flask_app/templates/admin/stations.html
@@ -258,9 +258,9 @@
               </svg>
               {{ _('Ricette disponibili') }} (<span x-text="filteredUnassignedRecipes.length"></span>)
             </h3>
-            <div class="border border-[var(--border-color)] rounded-lg divide-y divide-[var(--border-color)] max-h-96 overflow-y-auto">
+            <div class="border border-[var(--border-color)] rounded-lg p-2 space-y-2 h-96 overflow-y-auto">
               <template x-for="r in filteredUnassignedRecipes" :key="r.id">
-                <div class="flex items-center justify-between px-3 py-2 hover:bg-[var(--bg-secondary)] transition-colors">
+                <div class="flex items-center justify-between px-3 py-2 border border-[var(--border-color)] rounded-md hover:bg-[var(--bg-secondary)] transition-colors">
                   <div class="min-w-0 flex-1">
                     <div class="font-mono text-xs font-semibold text-[var(--text-primary)] truncate" x-text="r.code"></div>
                     <div class="text-xs text-[var(--text-secondary)] truncate" x-text="r.name"></div>
@@ -292,9 +292,9 @@
               </svg>
               {{ _('Assegnate alla stazione') }} (<span x-text="filteredAssignedRecipes.length"></span>)
             </h3>
-            <div class="border border-[var(--border-color)] rounded-lg divide-y divide-[var(--border-color)] max-h-96 overflow-y-auto">
+            <div class="border border-[var(--border-color)] rounded-lg p-2 space-y-2 h-96 overflow-y-auto">
               <template x-for="r in filteredAssignedRecipes" :key="r.id">
-                <div class="flex items-center justify-between px-3 py-2 hover:bg-[var(--bg-secondary)] transition-colors">
+                <div class="flex items-center justify-between px-3 py-2 border border-[var(--border-color)] rounded-md hover:bg-[var(--bg-secondary)] transition-colors">
                   <div class="min-w-0 flex-1">
                     <div class="font-mono text-xs font-semibold text-[var(--text-primary)] truncate" x-text="r.code"></div>
                     <div class="text-xs text-[var(--text-secondary)] truncate" x-text="r.name"></div>