I added page-break-inside: avoid;
to [data-ref="table"] > tbody > tr > td
[data-ref="table"] > tbody > tr > td {
border-bottom: 1px solid #e6e6e6;
padding: 0.75rem;
border: 1px solid black;
border-collapse: collapse;
page-break-inside: avoid;
}
This makes the overflowing rows get moved to next page so there isn’t a row that gets split between two pages.
Here is example of the multi page invoice before this change (the last row on first page is getting extended):
and there is the invoice after this modification is added (the large row gets moved to next page):