From 7e5ee7b5eaf1207cace63662fca09d766c242b94 Mon Sep 17 00:00:00 2001
From: AIIrondev <iron.ai.dev@gmail.com>
Date: Mon, 17 Aug 2026 00:02:49 +0200
Subject: [PATCH] Slight fix of the displaying of the detailed view, for the
 bibliothek focusing on the style

---
 Web/templates/library_table.html | 52 ++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/Web/templates/library_table.html b/Web/templates/library_table.html
index e05f7a7..5f23b05 100644
--- a/Web/templates/library_table.html
+++ b/Web/templates/library_table.html
@@ -450,6 +450,58 @@
         width: 100%;
         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);
+    }
+
+    .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);
+    }
+
+    .item-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        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>
 
 <div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">