padding/margin is now always unset at the bottom of pages in the findings component
generated-tables now have overflow-wrap: anywhere on td elements
manual page breaks inserted at the end or beginning of a finding section are now moved outside of the section to create consistent page break behavior.
manual page-breaks inserted into component sections are removed after a complete render
fix issue with finding-content-header not being transferred across page breaks
Why Were These Changes Made
Padding and Margin
Attempting to force padding/margin at the bottom of a finding table would generally result in significant pushback from paged.js, normally causing it to overflow into the footer of the page. By doing what paged.js wants with padding/margin at the bottom of a page, the finding table will generally not overflow as previously described. Along with this change, code blocks have a visual change when split at the end of a page
as seen in the image, The rounded borders on the code blocks are removed at the end and beginning of a page within finding tables. This should provide a some visual feedback that the code block continues onto the next page. In combination with the removal of padding at the bottom of a finding-table, this should result in a cleaner appearance.
Page Breaks
There were scenarios where page breaks inserted at the beginning or end of a finding section would break rendering. A paged.js hook was added that moves the page break to a better location in those scenarios. Additionally, after the report is rendered, these elements are removed from the rendered report so that css rules can work as expected in certain cases.
Copying finding-content-header would also break in certain cases, as seen in the following example:
The missing header was caused by the cleanup function in paged-overrides.js removing the empty elements that needed to be copied over. This happens before the afterRendered hook in paged.js and means that a finding section header with an empty finding-content would not get copied over as needed. Now these elements are removed at the end of afterRendered in paged-overrides.js
Tables
Table components would sometimes duplicate the table header if it was large enough to require a page break.
Adding overflow-wrap: anywhere seemed to mostly fix it in the rare cases it occurred. Further testing needs to be done to fully fix this problem, but the new css rule should at the very least make it happen less often.
Summary of Changes
overflow-wrap: anywhereontdelementsfinding-content-headernot being transferred across page breaksWhy Were These Changes Made
Padding and Margin
Attempting to force padding/margin at the bottom of a finding table would generally result in significant pushback from paged.js, normally causing it to overflow into the footer of the page. By doing what paged.js wants with padding/margin at the bottom of a page, the finding table will generally not overflow as previously described. Along with this change, code blocks have a visual change when split at the end of a page
as seen in the image, The rounded borders on the code blocks are removed at the end and beginning of a page within finding tables. This should provide a some visual feedback that the code block continues onto the next page. In combination with the removal of padding at the bottom of a finding-table, this should result in a cleaner appearance.
Page Breaks
There were scenarios where page breaks inserted at the beginning or end of a finding section would break rendering. A paged.js hook was added that moves the page break to a better location in those scenarios. Additionally, after the report is rendered, these elements are removed from the rendered report so that css rules can work as expected in certain cases.
Copying
finding-content-headerwould also break in certain cases, as seen in the following example:The missing header was caused by the cleanup function in paged-overrides.js removing the empty elements that needed to be copied over. This happens before the
afterRenderedhook in paged.js and means that a finding section header with an emptyfinding-contentwould not get copied over as needed. Now these elements are removed at the end ofafterRenderedin paged-overrides.jsTables
Table components would sometimes duplicate the table header if it was large enough to require a page break.
Adding
overflow-wrap: anywhereseemed to mostly fix it in the rare cases it occurred. Further testing needs to be done to fully fix this problem, but the new css rule should at the very least make it happen less often.