Recipes are only partially printed or printed incorrectly

[Vrumfondel1]

Description
Recipes are only partially printed or printed incorrectly

Reproduction
Steps to reproduce the behavior:

1. Enter or import any recipe
2. Click on "Print recipe"
3. See error

Actual behavior
The recipes are only displayed partially or with blank pages (see screen shots and attachments)

Screenshots
Manually created recipe Screenshot and PDF

Manually created recipe.PDF

Imported recipe Screenshot and PDF

Imported Recipe.PDF

Browser
Tested with different Android Browsers on Samsung Galaxy Tab S7+ (Dex) and with Edge and Chrome on Windows

Versions
Nextcloud server version: 27.1.5 Enterprise
Cookbook version: 0.10.5
Database system: MySQL 10.5.19

[RobboBT]

Will only print ingredients, does not print instructions. tested in Chrome, Safari and Firefox.

[Hagar01]

I had a similar issue - different browsers printed differentley.
I had to replace the following css line from RecipeView.vue -

grid-template-rows: 100% 100% 100% 1fr;

with

grid-template-rows: auto 1fr;

This also had the effect of displaying on the screen better.
This line was forcing each section to be the same length, even though 1 might be missing or shorter.
It also affected printing in that it was stretching the sections to large blank areas.
Please don't specify the size of the grid-rows - let them set their own size based on the current sizes.
Currently you have the height set to 300% instead of auto