From 4a38c2ebdfd80d0cbe130fd0caca693ce42fe7fa Mon Sep 17 00:00:00 2001
From: Ano-sys <timo.niemann02@gmail.com>
Date: Thu, 14 May 2026 19:13:42 +0200
Subject: [PATCH] Cards have hover effects now, fixed card size missmatch from
 previous commit

---
 Guestlist/Components/Pages/GuestList.razor |  1 -
 Guestlist/wwwroot/app.css                  | 48 ++++++++++++++++++----
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/Guestlist/Components/Pages/GuestList.razor b/Guestlist/Components/Pages/GuestList.razor
index 57d6a36..1d68494 100644
--- a/Guestlist/Components/Pages/GuestList.razor
+++ b/Guestlist/Components/Pages/GuestList.razor
@@ -4,7 +4,6 @@
 <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
     <div>
         <h1 class="h2 mb-1">Guest list</h1>
-        <p class="text-secondary mb-0">Read-only access for guests.</p>
     </div>
 
     <div class="d-flex flex-column flex-sm-row gap-3 w-100 w-md-auto">
diff --git a/Guestlist/wwwroot/app.css b/Guestlist/wwwroot/app.css
index 99d3879..b01089f 100644
--- a/Guestlist/wwwroot/app.css
+++ b/Guestlist/wwwroot/app.css
@@ -42,10 +42,34 @@ a, .btn-link {
     gap: 1rem;
 }
 
+.admin-panel-grid > .card,
 .admin-panel-column > .card {
     border-radius: 8px;
 }
 
+.guest-card-grid > .card,
+.admin-panel-grid > .card,
+.admin-panel-column > .card {
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+.guest-card-grid > .card:focus-within,
+.admin-panel-grid > .card:focus-within,
+.admin-panel-column > .card:focus-within {
+    border-color: rgba(13, 110, 253, 0.35);
+    box-shadow: 0 0.5rem 1.25rem rgba(33, 37, 41, 0.12) !important;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .guest-card-grid > .card:hover,
+    .admin-panel-grid > .card:hover,
+    .admin-panel-column > .card:hover {
+        border-color: rgba(13, 110, 253, 0.35);
+        box-shadow: 0 0.5rem 1.25rem rgba(33, 37, 41, 0.12) !important;
+        transform: translateY(-2px);
+    }
+}
+
 .guest-card-grid > .card {
     flex: 0 1 auto;
     width: fit-content;
@@ -64,18 +88,19 @@ a, .btn-link {
 }
 
 .guest-masonry-grid {
-    display: block;
-    column-width: 22rem;
-    column-gap: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: flex-start;
 }
 
 .guest-masonry-grid > .card {
-    display: inline-block;
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-    margin: 0 0 1rem;
-    break-inside: avoid;
+    display: flex;
+    flex: 0 1 auto;
+    width: fit-content;
+    min-width: min(100%, 14rem);
+    max-width: min(100%, 22rem);
+    margin: 0;
 }
 
 .auth-shell {
@@ -105,6 +130,11 @@ a, .btn-link {
         width: 100%;
         max-width: none;
     }
+
+    .guest-masonry-grid > .card {
+        width: 100%;
+        max-width: none;
+    }
 }
 
 h1:focus {