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 @@
Guest list
-
Read-only access for guests.
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 {