Guest management does not flood first row with guests anymore

Guestlist/Components/Pages/Guests.razor

@@ -29,28 +29,30 @@
     <div class="alert alert-warning" role="alert">@ErrorMessage</div>
 }
 
+<article class="card shadow-sm guest-add-card">
+    <div class="card-body">
+        <h2 class="h5 card-title">Add guest</h2>
+        <form method="post" action="/guests/add">
+            <div class="mb-3">
+                <label class="form-label" for="new-guest-name">Name</label>
+                <input id="new-guest-name" class="form-control" name="name" />
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label" for="new-guest-notes">Notes</label>
+                <textarea id="new-guest-notes" class="form-control" rows="3" name="notes"></textarea>
+            </div>
+
+            <button type="submit" class="btn btn-primary">
+                Add guest
+            </button>
+        </form>
+    </div>
+</article>
+
+<h2 class="h5 mt-4 mb-3">Current Guests</h2>
+
 <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>
-            <form method="post" action="/guests/add">
-                <div class="mb-3">
-                    <label class="form-label" for="new-guest-name">Name</label>
-                    <input id="new-guest-name" class="form-control" name="name" />
-                </div>
-
-                <div class="mb-3">
-                    <label class="form-label" for="new-guest-notes">Notes</label>
-                    <textarea id="new-guest-notes" class="form-control" rows="3" name="notes"></textarea>
-                </div>
-
-                <button type="submit" class="btn btn-primary w-100">
-                    Add guest
-                </button>
-            </form>
-        </div>
-    </article>
-
     @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;