Guest management does not flood first row with guests anymore

Guestlist/Components/Pages/Guests.razor

@@ -29,8 +29,7 @@
     <div class="alert alert-warning" role="alert">@ErrorMessage</div>
 }
 
-<div class="guest-card-grid guest-masonry-grid">
+<article class="card shadow-sm guest-add-card">
-    <article class="card shadow-sm">
     <div class="card-body">
         <h2 class="h5 card-title">Add guest</h2>
         <form method="post" action="/guests/add">
@@ -44,13 +43,16 @@
                 <textarea id="new-guest-notes" class="form-control" rows="3" name="notes"></textarea>
             </div>
 
-                <button type="submit" class="btn btn-primary w-100">
+            <button type="submit" class="btn btn-primary">
                 Add guest
             </button>
         </form>
     </div>
-    </article>
+</article>
 
+<h2 class="h5 mt-4 mb-3">Current Guests</h2>
+
+<div class="guest-card-grid guest-masonry-grid">
     @if (GuestEntries is null)
     {
         <article class="card shadow-sm">

Guestlist/wwwroot/app.css

@@ -42,17 +42,20 @@ a, .btn-link {
     gap: 1rem;
 }
 
+.guest-add-card,
 .admin-panel-grid > .card,
 .admin-panel-column > .card {
     border-radius: 8px;
 }
 
+.guest-add-card,
 .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-add-card:focus-within,
 .guest-card-grid > .card:focus-within,
 .admin-panel-grid > .card:focus-within,
 .admin-panel-column > .card:focus-within {
@@ -61,6 +64,7 @@ a, .btn-link {
 }
 
 @media (hover: hover) and (pointer: fine) {
+    .guest-add-card:hover,
     .guest-card-grid > .card:hover,
     .admin-panel-grid > .card:hover,
     .admin-panel-column > .card:hover {
@@ -70,6 +74,10 @@ a, .btn-link {
     }
 }
 
+.guest-add-card {
+    width: 100%;
+}
+
 .guest-card-grid > .card {
     flex: 0 1 auto;
     width: fit-content;