⚡ [#4255] Speed up PDF generation by replacing flexbox with float

[stevenbal]

Turns out that flexbox was the problem here (also mentioned at the end of this comment Kozea/WeasyPrint#578 (comment)). I didn't want to use floats, but all the alternatives I tried were just as slow 😞.

For comparison, this is what a PDF currently looks like if I enter 3500 characters in the textarea (takes about a minute to render locally, if I double the characters it exceeds the maximum):
original.pdf. I'm not sure if it's intentional that the first page does not contain any of the steps yet, but I could change that as well if needed

This is what it looks like after these CSS changes (takes about 2-3 seconds to render): fixes.pdf.

Closes #4255

Changes

• Speed up PDF generation by replacing flexbox with float

Checklist

Check off the items that are completed or not relevant.

• Impact on features

  • Checked copying a form
  • Checked import/export of a form
  • Config checks in the configuration overview admin page
  • Problem detection in the admin email digest is handled

• Release management

  • I have labelled the PR as "needs-backport" accordingly

• I have updated the translations assets (you do NOT need to provide translations)

  • Ran ./bin/makemessages_js.sh.sh
  • Ran ./bin/compilemessages_js.sh

• Commit hygiene

  • Commit messages refer to the relevant Github issue
  • Commit messages explain the "why" of change, not the how

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.27%. Comparing base (6821725) to head (75483b2).
Report is 747 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4327   +/-   ##
=======================================
  Coverage   96.26%   96.27%           
=======================================
  Files         731      731           
  Lines       23723    23735   +12     
  Branches     2795     2797    +2     
=======================================
+ Hits        22838    22850   +12     
  Misses        616      616           
  Partials      269      269           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sergei-maertens]

Interesting cause and solution!

I'm not happy with the layout yet, especially the wrapping after a page break and the lack of information on the first page. Perhaps that page-break-inside is the culprit here?

I'm wondering if we should maybe apply a more column-oriented layout instead of the tabular layout now 🤔

[stevenbal]

@sergei-maertens if I remove the page-break-inside, it looks like this no_avoid.pdf

[sergei-maertens]

Reference of what a "normal" PDF looks like.
dmn-demo-15-mei.pdf

[stevenbal]

The word-break issue only occurs in the dev view, if I render the PDF it works as expected

[sergei-maertens]

Backports: d8e5a8a, 555e45f and 2b0a933