Following the angular material update to version 15, many of us experienced issues with CSS changes breaking. This also affected legacy code that included sticky headers.
<div class="row">
<div class="col-12">
<div>
<table id="drawItemsGrid" *ngIf="budgetService.Budget" class="table table-hover table-sm budget-table">
<thead>
<tr style="position: sticky; top: 0; z-index: 99999999 !important;">
<th class="text-center" style="width: 6%;">Line #</th>
<th style="width: 10%;">Description</th>
<th class="text-right" style="width: 8%;">Current <br />({{budgetService.BudgetTotal.Budget | currency}})
</th>
<th class="text-right" style="width: 8%;">Disbursed <br />({{budgetService.BudgetTotal.Paid | currency}})
</th>
<th class="text-right" style="width: 10%;">Requested <br />({{budgetService.BudgetTotal.Requested |
currency}})</th>
<th class="text-right" style="width: 10%;">Pending <br />({{budgetService.BudgetTotal.Pending | currency}})
</th>
<th class="text-right" style="width: 10%;">Retention <br />({{budgetService.BudgetTotal.Retainage |
currency}})</th>
<th class="text-right" style="width: 8%;">Balance <br />({{budgetService.BudgetTotal.Balance | currency}})
</th>
<th class="text-center" style="width: 8%;">Disb + Pend</th>
<th class="text-right" style="width: 8%;">Complete %</th>
<th style="width: 14%;">Comments</th>
<th style="width: 5%;text-align: center;">Borrower ({{budgetService?.totalBorrowersPendingAmount}})</th>
<th style="width: 5%;text-align: center;">Contractor ({{budgetService?.totalContractorsPendingAmount}})</th>
<th colspan="2" style="text-align: center;">Support<br /><span style="float: left;">I</span> <span style="float: right;">P</span></th>
</tr>
</thead>