From 41d9c0a8485f28bfda88b312095bf2fef758ce7f Mon Sep 17 00:00:00 2001
From: AIIrondev <iron.ai.dev@gmail.com>
Date: Mon, 17 Aug 2026 00:19:07 +0200
Subject: [PATCH] Style fix for the detailed galery view.

---
 Web/templates/library_table.html | 33 ++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/Web/templates/library_table.html b/Web/templates/library_table.html
index 584354f..1825eac 100644
--- a/Web/templates/library_table.html
+++ b/Web/templates/library_table.html
@@ -451,30 +451,35 @@
         height: 100%;
     }
 
+
     .detail-gallery-container {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
-        gap: 12px;
-        margin: 15px 0 20px 0; /* Abstand oben und unten unter dem Titel */
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        margin: 15px 0 20px 0;
         width: 100%;
+        align-items: center;
     }
 
     .item-image-wrapper {
-        position: relative;
-        width: 100%;
-        height: 130px; /* Feste Höhe verhindert das Kollabieren im Modal! */
+        background-color: #f8fafc;
+        border: 1px solid #e2e8f0;
         border-radius: 8px;
-        overflow: hidden;
-        background-color: #f3f4f6;
-        border: 1px solid #e5e7eb;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        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; /* Passt das Bild perfekt ein, ohne es zu verzerren */
+        max-width: 160px;
+        max-height: 200px;
+        width: auto;
+        height: auto;
         display: block;
+        object-fit: contain;
+        border-radius: 4px;
     }
 </style>