Changed containering, cards align better to space now

Guestlist/Components/Pages/Admin.razor

@@ -9,6 +9,7 @@
 </div>
 
 <div class="admin-panel-grid">
+    <div class="admin-panel-column">
         <section class="card shadow-sm">
             <div class="card-body">
                 <h2 class="h5 card-title">Guest access</h2>
@@ -32,6 +33,26 @@
             </div>
         </section>
 
+        <section class="card shadow-sm border-danger-subtle">
+            <div class="card-body">
+                <h2 class="h5 card-title">Reset setup</h2>
+                <p class="text-secondary">Copy the current database to a timestamped backup database and start setup with a fresh database.</p>
+
+                <form method="post" action="/admin/reset-setup">
+                    <button type="submit" class="btn btn-outline-danger">
+                        Reset setup
+                    </button>
+                </form>
+
+                @if (!string.IsNullOrWhiteSpace(Message))
+                {
+                    <div class="alert alert-warning mt-3 mb-0" role="alert">@Message</div>
+                }
+            </div>
+        </section>
+    </div>
+
+    <div class="admin-panel-column">
         <section class="card shadow-sm">
             <div class="card-body">
                 <h2 class="h5 card-title">Create maintainer</h2>
@@ -64,7 +85,9 @@
                 }
             </div>
         </section>
+    </div>
 
+    <div class="admin-panel-column">
         <section class="card shadow-sm">
             <div class="card-body">
                 <h2 class="h5 card-title">Maintainers</h2>
@@ -99,7 +122,9 @@
                 }
             </div>
         </section>
+    </div>
 
+    <div class="admin-panel-column">
         <section class="card shadow-sm">
             <div class="card-body">
                 <h2 class="h5 card-title">Setup recovery</h2>
@@ -117,22 +142,5 @@
                 }
             </div>
         </section>
-
-    <section class="card shadow-sm border-danger-subtle">
-        <div class="card-body">
-            <h2 class="h5 card-title">Reset setup</h2>
-            <p class="text-secondary">Copy the current database to a timestamped backup database and start setup with a fresh database.</p>
-
-            <form method="post" action="/admin/reset-setup">
-                <button type="submit" class="btn btn-outline-danger">
-                    Reset setup
-                </button>
-            </form>
-
-            @if (!string.IsNullOrWhiteSpace(Message))
-            {
-                <div class="alert alert-warning mt-3 mb-0" role="alert">@Message</div>
-            }
     </div>
-    </section>
 </div>

Guestlist/Components/Pages/GuestList.razor

@@ -59,7 +59,7 @@ else if (!FilteredGuestEntries.Any())
 }
 else
 {
-    <div class="guest-card-grid">
+    <div class="guest-card-grid guest-masonry-grid">
         @foreach (var guest in FilteredGuestEntries)
         {
             <article class="card shadow-sm">

Guestlist/Components/Pages/Guests.razor

@@ -29,7 +29,7 @@
     <div class="alert alert-warning" role="alert">@ErrorMessage</div>
 }
 
-<div class="guest-card-grid">
+<div class="guest-card-grid guest-masonry-grid">
     <article class="card shadow-sm">
         <div class="card-body">
             <h2 class="h5 card-title">Add guest</h2>

Guestlist/wwwroot/app.css

@@ -35,7 +35,14 @@ a, .btn-link {
     align-items: start;
 }
 
-.admin-panel-grid > .card {
+.admin-panel-column {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.admin-panel-column > .card {
     border-radius: 8px;
 }
 
@@ -56,6 +63,21 @@ a, .btn-link {
     overflow-wrap: anywhere;
 }
 
+.guest-masonry-grid {
+    display: block;
+    column-width: 22rem;
+    column-gap: 1rem;
+}
+
+.guest-masonry-grid > .card {
+    display: inline-block;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    margin: 0 0 1rem;
+    break-inside: avoid;
+}
+
 .auth-shell {
     min-height: calc(100vh - 160px);
     display: flex;