Error fixing and debugging implementation.

Web/app.py

@@ -3826,11 +3826,14 @@ def api_item_detail(item_id):
         {f'<p><strong>Ausgeliehen von:</strong> {html.escape(str(borrower_value))}</p>' if borrower_value and status_label == 'Ausgeliehen' else ''}
         {borrows_html}
         """
-        
+        ctx = get_tenant_context()
+        current_tenant_id = ctx.tenant_id if ctx else None
+
         client.close()
         return jsonify({
             'html': detail_html,
-            'images': item.get('Images', item.get('Bilder', []))
+            'images': item.get('Images', item.get('Bilder', [])),
+            'tenant': str(current_tenant_id)
         }), 200
     except Exception as e:
         app.logger.error(f"Error fetching item detail: {e}")

Web/templates/library_table.html

@@ -451,56 +451,35 @@
         height: 100%;
     }
 
+
     .detail-gallery-container {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-        gap: 16px;
-        margin-bottom: 24px;
-        padding-bottom: 20px;
-        border-bottom: 1px solid var(--ui-surface-soft, #e5e7eb);
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        margin: 15px 0 20px 0;
+        width: 100%;
+        align-items: center;
     }
 
     .item-image-wrapper {
-        position: relative;
-        aspect-ratio: 1 / 1;
-        border-radius: 10px;
-        overflow: hidden;
-        background-color: #f3f4f6;
-        border: 1px solid #e5e7eb;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
-        transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .item-image-wrapper:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+        background-color: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        padding: 6px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
     }
 
     .item-image {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+        max-width: 160px;
+        max-height: 200px;
+        width: auto;
+        height: auto;
         display: block;
-        transition: transform 0.3s ease;
-    }
-
-    .item-image-wrapper:hover .item-image {
-        transform: scale(1.03);
-    }
-
-    /* Fallback / No-Image Styling im Detail-Modal */
-    .detail-no-image {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 20px;
-        background: #f9fafb;
-        border-radius: 8px;
-        border: 1px dashed #d1d5db;
-        color: #6b7280;
-        font-size: 0.9em;
-        margin-bottom: 20px;
+        object-fit: contain;
+        border-radius: 4px;
     }
 </style>
 
@@ -1391,7 +1370,8 @@
                 return response.json();
             })
             .then(data => {
-                let mediaHtml = '';
+                detailContent.innerHTML = data.html;
+
                 const imageArray = data.images || [];
 
                 if (Array.isArray(imageArray) && imageArray.length > 0) {
@@ -1400,13 +1380,27 @@
                             ? image
                             : `/uploads/${image}`;
 
-                        return `<img src="${imageSrc}" alt="Buchcover / Bild" class="item-image" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; margin-right: 15px; margin-bottom: 15px;">`;
+                        return `
+                                <div class="item-image-wrapper">
+                                    <img src="{{ url_for('uploaded_file', filename=img) }}"
+                                        alt="Buchcover"
+                                        class="item-image"
+                                        loading="lazy"
+                                        onload="console.log('Bild geladen:', '${imageSrc}')"
+                                        onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
+                                </div>
+                    `;
                     }).join('');
 
-                    mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
-                }
+                    const mediaHtml = `<div class="detail-gallery-container">${imagesHtml}</div>`;
 
-                detailContent.innerHTML = mediaHtml + data.html;
+                    const h2Tag = detailContent.querySelector('h2');
+                    if (h2Tag) {
+                        h2Tag.insertAdjacentHTML('afterend', mediaHtml);
+                    } else {
+                        detailContent.insertAdjacentHTML('afterbegin', mediaHtml);
+                    }
+                }
             })
             .catch(error => {
                 console.error('Error fetching item detail:', error);