From 141edbfd61f8d5721646f83e786c192c360fb9a6 Mon Sep 17 00:00:00 2001
From: Gemini Agent <gemini@example.com>
Date: Tue, 12 May 2026 07:04:12 +0000
Subject: [PATCH] Fix UI bugs: Phase 2 thumbnails and Phase 1 card layouts

- Fixed missing thumbnails in Phase 2 after drag & drop (SQL query was missing image_url field during sync).

- Removed flex-grow from Phase 1 cards and added align-items: start to grid to prevent empty bottom spaces.

- Forced image wrapper to 120px height to ensure images appear large while keeping cards short.
---
 src/api_packing_list_handler.php  |  1 +
 src/manage_packing_list_items.php | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/api_packing_list_handler.php b/src/api_packing_list_handler.php
index 22017e9..cf251f7 100644
--- a/src/api_packing_list_handler.php
+++ b/src/api_packing_list_handler.php
@@ -297,6 +297,7 @@ function get_all_items($conn, $packing_list_id) {
                 a.weight_grams, 
                 a.product_designation, 
                 a.consumable, 
+                a.image_url,
                 m.name as manufacturer_name 
             FROM packing_list_items pli 
             LEFT JOIN articles a ON pli.article_id = a.id 
diff --git a/src/manage_packing_list_items.php b/src/manage_packing_list_items.php
index cc2b296..0829925 100644
--- a/src/manage_packing_list_items.php
+++ b/src/manage_packing_list_items.php
@@ -153,30 +153,33 @@ $conn->close();
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
         gap: 12px; padding: 5px;
+        align-items: start; /* Prevents cards from stretching vertically */
     }
     .lager-card {
-        border: 1px solid #eee; border-radius: 8px; padding: 8px;
+        border: 1px solid #eee; border-radius: 8px; padding: 6px;
         text-align: center; background: #fff; display: flex; flex-direction: column;
         transition: transform 0.1s, box-shadow 0.1s;
     }
     .lager-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
     .lager-img-wrapper {
-        width: 100%; aspect-ratio: 1 / 1; margin-bottom: 8px; display: flex;
+        width: 100%; height: 120px; margin-bottom: 6px; display: flex;
         align-items: center; justify-content: center; overflow: hidden;
     }
     .lager-img-wrapper img.lager-card-img {
-        width: 100%; height: 100%; object-fit: contain; border-radius: 4px;
+        width: 100% !important; height: 100% !important; 
+        max-width: 100% !important; max-height: 120px !important;
+        object-fit: contain !important; border-radius: 4px;
     }
     .lager-title {
         font-size: 0.85em; font-weight: 600; margin-bottom: 4px;
-        line-height: 1.2; flex-grow: 1; word-wrap: break-word;
+        line-height: 1.1; word-wrap: break-word;
     }
     .lager-controls {
-        display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px;
+        display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px;
     }
     .table-status-text {
         font-size: 0.75em; color: #2e7d32; font-weight: 600;
-        min-height: 1.2em; margin-top: 6px; visibility: hidden;
+        min-height: 14px; margin-top: 2px; visibility: hidden; line-height: 1;
     }
     .table-status-text.visible { visibility: visible; }