Refactor StateScheduleHandout component for improved print layout and styling

WebApp/Components/Features/Calendar/StateScheduleHandout.razor

@@ -11,12 +11,14 @@
 @inject IOptionsMonitor<StateScheduleHandoutOptions> HandoutOptionsMonitor
 @inject IEventOccurrenceService EventOccurrenceService
 
-<PageHeader
+<div class="no-print">
-    Title="State schedule handout"
+    <PageHeader
-    Description="Print per-student schedules and the combined master list (browser Print)."
+        Title="State schedule handout"
-    Icon="@Icons.Material.Filled.Print"
+        Description="Print per-student schedules and the combined master list."
-    ShowBackButton="true"
+        Icon="@Icons.Material.Filled.Print"
-    BackButtonUrl="/calendar" />
+        ShowBackButton="true"
+        BackButtonUrl="/calendar" />
+</div>
 
 @if (_students == null || _allOccurrences == null)
 {
@@ -26,7 +28,7 @@ else
 {
     var opts = HandoutOptionsMonitor.CurrentValue;
 
-    <MudContainer>
+    <MudContainer Class="state-schedule-handout">
         @foreach (var student in _students)
         {
             <MudContainer Class="pagebreak">
@@ -45,18 +47,25 @@ else
                 </MudText>
 
                 <MudText Typo="Typo.subtitle1" Class="mb-1">Events</MudText>
-                <MudTable Items="@GetEventSummaryRows(student)" Dense="true" Hover="false" Class="mb-4 nobrk">
+                <MudSimpleTable Dense="true" Class="state-schedule-table mb-4 nobrk">
-                    <HeaderContent>
+                    <thead>
-                        <MudTh>State ID</MudTh>
+                    <tr>
-                        <MudTh>Event</MudTh>
+                        <th>State ID</th>
-                        <MudTh>Activity</MudTh>
+                        <th>Event</th>
-                    </HeaderContent>
+                        <th>Activity</th>
-                    <RowTemplate>
+                    </tr>
-                        <MudTd DataLabel="State ID">@context.StateRegistrationId</MudTd>
+                    </thead>
-                        <MudTd DataLabel="Event">@context.EventName</MudTd>
+                    <tbody>
-                        <MudTd DataLabel="Activity">@context.Activity</MudTd>
+                    @foreach (var eventRow in GetEventSummaryRows(student))
-                    </RowTemplate>
+                    {
-                </MudTable>
+                        <tr>
+                            <td>@eventRow.StateRegistrationId</td>
+                            <td>@eventRow.EventName</td>
+                            <td>@eventRow.Activity</td>
+                        </tr>
+                    }
+                    </tbody>
+                </MudSimpleTable>
 
                 @{
                     var scheduleRows = BuildStudentSchedule(student, opts).ToList();

WebApp/wwwroot/app.css

@@ -52,10 +52,54 @@
     width: 100%;
 }
 
-.state-schedule-table th,
+@media print {
-.state-schedule-table td {
+    .state-schedule-handout {
-    vertical-align: top;
+        margin-left: -30pt !important;
-    padding: 4px 8px;
+        margin-right: -12pt !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        width: calc(100% + 42pt) !important;
+        max-width: none !important;
+    }
+
+    .state-schedule-handout .mud-paper,
+    .state-schedule-handout .mud-table-container,
+    .state-schedule-handout .mud-table {
+        box-shadow: none !important;
+    }
+
+    .state-schedule-table,
+    .state-schedule-table table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .state-schedule-table th,
+    .state-schedule-table td,
+    .state-schedule-table table th,
+    .state-schedule-table table td {
+        vertical-align: top;
+        padding: 4px 8px;
+        border-top: none !important;
+        border-left: none !important;
+        border-right: none !important;
+        border-bottom: none !important;
+    }
+
+    .state-schedule-table thead th,
+    .state-schedule-table table thead th {
+        border-bottom: 2px solid #000 !important;
+    }
+
+    .state-schedule-table tbody td,
+    .state-schedule-table table tbody td {
+        border-bottom: 1px solid #000 !important;
+    }
+
+    .state-schedule-table tbody tr:last-child td,
+    .state-schedule-table table tbody tr:last-child td {
+        border-bottom: none !important;
+    }
 }
 
 .page-header {