Bootstrap4 dark blue DataTable header transparent

[Bultjer]

Using bootstrap4-dark-blue Theme, the surface-hover Variable has a transparent Background. This is fine most of the time, but when the DataTable is used with sortable and scrollable, while hovering over the header, the row below is visible.

<DataTable value={data} scrollable scrollHeight="100vh">
    <Column field="iconLink" header="Icon"></Column>
    <Column field="shortName" header="Name" sortable></Column>
</DataTable>

.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.87);
}