Move action buttons after the forms.

WebApp/Components/Features/Events/Create.razor

@@ -8,12 +8,7 @@
     Title="Create"
     Subtitle="Event"
     ShowBackButton="true"
-    BackButtonUrl="/events">
+    BackButtonUrl="/events" />
-    <ActionButtons>
-        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-event-form">Create</MudButton>
-        <MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
-    </ActionButtons>
-</PageHeader>
 
 <EditForm id="create-event-form" Model="EventDefinition" OnValidSubmit="OnValidSubmit" Enhance>
     <AntiforgeryToken />
@@ -51,6 +46,10 @@
     </MudGrid>
 </EditForm>
 
+<FormActions>
+    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-event-form">Create</MudButton>
+    <MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
+</FormActions>
 
 @code {
     [SupplyParameterFromForm]

WebApp/Components/Features/Events/Edit.razor

@@ -15,12 +15,7 @@
     Title="Edit"
     Subtitle="Event"
     ShowBackButton="true"
-    BackButtonUrl="/events">
+    BackButtonUrl="/events" />
-    <ActionButtons>
-        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="edit-event-form">Save</MudButton>
-        <MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
-    </ActionButtons>
-</PageHeader>
 
 <EditForm id="edit-event-form" Model="EventDefinition" OnValidSubmit="OnValidSubmit" Enhance>
     <AntiforgeryToken />
@@ -58,6 +53,11 @@
     </MudGrid>
 </EditForm>
 
+<FormActions>
+    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="edit-event-form">Save</MudButton>
+    <MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
+</FormActions>
+
 @code {
     [SupplyParameterFromQuery]
     private int Id { get; set; }

WebApp/Components/Features/Students/Create.razor

@@ -8,12 +8,7 @@
     Title="Create"
     Subtitle="Student"
     ShowBackButton="true"
-    BackButtonUrl="/students">
+    BackButtonUrl="/students" />
-    <ActionButtons>
-        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-student-form">Create</MudButton>
-        <MudButton Href="/students" Variant="Variant.Text">Cancel</MudButton>
-    </ActionButtons>
-</PageHeader>
 
 <EditForm id="create-student-form" Model="Student" OnValidSubmit="OnValidSubmit" Enhance>
     <AntiforgeryToken />
@@ -32,6 +27,11 @@
     </MudGrid>
 </EditForm>
 
+<FormActions>
+    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-student-form">Create</MudButton>
+    <MudButton Href="/students" Variant="Variant.Text">Cancel</MudButton>
+</FormActions>
+
 @code {
     [SupplyParameterFromForm]
     private Student Student { get; set; } = new() { TsaYear = 1 };

WebApp/Components/Features/Students/Edit.razor

@@ -15,12 +15,7 @@
     Title="Edit Student"
     Subtitle="@($"{Student.FirstNameLastName}")"
     ShowBackButton="true"
-    BackButtonUrl="@(ReturnUrl ?? "/students")">
+    BackButtonUrl="@(ReturnUrl ?? "/students")" />
-    <ActionButtons>
-        <MudButton OnClick="UpdateStudent" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
-        <MudButton Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Cancel</MudButton>
-    </ActionButtons>
-</PageHeader>
 
 @* https://www.mudblazor.com/components/form *@
 @* https://medium.com/@husainalbar/applying-mudblazor-for-crud-operations-in-our-blazor-project-a343037a52ef *@
@@ -52,6 +47,11 @@
         </MudGrid>
 </EditForm>
 
+<FormActions>
+    <MudButton OnClick="UpdateStudent" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
+    <MudButton Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Cancel</MudButton>
+</FormActions>
+
 @code {
     [SupplyParameterFromQuery]
     private int Id { get; set; }

WebApp/Components/Features/Teams/Create.razor

@@ -15,12 +15,7 @@
     Title="Create"
     Subtitle="Team"
     ShowBackButton="true"
-    BackButtonUrl="/teams">
+    BackButtonUrl="/teams" />
-    <ActionButtons>
-        <MudButton OnClick="AddTeam" Variant="Variant.Filled" Color="Color.Primary">Add</MudButton>
-        <MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
-    </ActionButtons>
-</PageHeader>
 
 <EditForm method="post" Model="Team" OnValidSubmit="AddTeam" FormName="create" Enhance>
     <AntiforgeryToken />
@@ -70,6 +65,11 @@
     }
 </EditForm>
 
+<FormActions>
+    <MudButton OnClick="AddTeam" Variant="Variant.Filled" Color="Color.Primary">Add</MudButton>
+    <MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
+</FormActions>
+
 @code {
     [SupplyParameterFromForm]
     private Team Team { get; set; } = new();

WebApp/Components/Features/Teams/Edit.razor

@@ -14,12 +14,7 @@
 <PageHeader Title="Edit Team"
     Subtitle=@Team.ToString()
     ShowBackButton="true"
-    BackButtonUrl="/teams">
+    BackButtonUrl="/teams" />
-    <ActionButtons>
-        <MudButton OnClick="UpdateTeam" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
-        <MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
-    </ActionButtons>
-</PageHeader>
 
 <EditForm method="post" Model="Team" OnValidSubmit="UpdateTeam" FormName="edit" Enhance>
         <AntiforgeryToken />
@@ -41,6 +36,11 @@
         </MudGrid>
 </EditForm>
 
+<FormActions>
+    <MudButton OnClick="UpdateTeam" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
+    <MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
+</FormActions>
+
 @code {
     [SupplyParameterFromQuery]
     private int Id { get; set; }

WebApp/Components/Shared/Components/FormActions.razor

@@ -0,0 +1,10 @@
+@namespace WebApp.Components.Shared.Components
+@using MudBlazor
+
+<div class="form-actions">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+}

WebApp/wwwroot/app.css

@@ -119,3 +119,11 @@ h1:focus {
     gap: 0.5rem;
     align-items: center;
 }
+
+.form-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+}