From c223c3ddabb2c09e769d0081e6b0d93853d2e13e Mon Sep 17 00:00:00 2001
From: deflax <daniel@deflax.net>
Date: Fri, 19 Jan 2024 20:35:45 +0200
Subject: [PATCH] reformat gallery css

---
 src/scheduler/templates/gallery.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/scheduler/templates/gallery.html b/src/scheduler/templates/gallery.html
index 5ed26c1..fc262f7 100644
--- a/src/scheduler/templates/gallery.html
+++ b/src/scheduler/templates/gallery.html
@@ -8,32 +8,32 @@
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
-            background-color: #212529; 
+            background-color: #212529;
             color: #fff;
         }
-
+        
         .gallery {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-around;
             margin: 0px;
         }
-
+        
         .gallery-item {
             flex: 0 1 calc(25% - 20px);
-            margin: 0px;
+            margin: 10px; /* Added margin between items */
             overflow: hidden;
             position: relative;
             cursor: pointer;
+            box-sizing: border-box; /* Include padding and border in the element's total width and height */
         }
-
+        
         .gallery-item img {
-            max-height: 480px;
-            width: 100%;
+            max-width: 100%; /* Ensure images don't exceed the width of their container */
             height: auto;
             display: block;
         }
-
+        
         .overlay {
             position: absolute;
             top: 0;
@@ -47,21 +47,21 @@
             opacity: 0;
             transition: opacity 0.3s ease;
         }
-
+        
         .gallery-item:hover .overlay {
             opacity: 1;
         }
-
+        
         .overlay-content {
             text-align: center;
             color: #fff;
         }
-
+        
         .image-link {
             display: block;
             text-decoration: none;
             color: inherit;
-        }
+        }        
     </style>
     <title>DeflaxTV Video Gallery</title>
 </head>