Style fix for the detailed galery view.

Web/templates/library_table.html

@@ -453,54 +453,28 @@
 
     .detail-gallery-container {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
-        gap: 16px;
+        gap: 12px;
-        margin-bottom: 24px;
+        margin: 15px 0 20px 0; /* Abstand oben und unten unter dem Titel */
-        padding-bottom: 20px;
+        width: 100%;
-        border-bottom: 1px solid var(--ui-surface-soft, #e5e7eb);
     }
 
     .item-image-wrapper {
         position: relative;
-        aspect-ratio: 1 / 1;
+        width: 100%;
-        border-radius: 10px;
+        height: 130px; /* Feste Höhe verhindert das Kollabieren im Modal! */
+        border-radius: 8px;
         overflow: hidden;
         background-color: #f3f4f6;
         border: 1px solid #e5e7eb;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        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);
     }
 
     .item-image {
         width: 100%;
         height: 100%;
-        object-fit: cover;
+        object-fit: cover; /* Passt das Bild perfekt ein, ohne es zu verzerren */
         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;
     }
 </style>
 
@@ -1391,7 +1365,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 +1375,22 @@
                             ? 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="${imageSrc}" alt="Buchcover / Bild" class="item-image" loading="lazy">
+                        </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);