Separate scrollbar for ingredients list and cooking steps

[TheMBeat]

Is your feature request related to a problem? Please describe.
On the IPad in portait mode, the ingredient lists are above the individual cooking steps. Here it would be nice if the lists were also side by side.
When the IPad is horizontal, both lists are next to each other, but they cannot be scrolled independently. This means you always have to scroll up to look at the ingredients again.

Describe the solution you'd like
Serperate scrollbar for ingredients list and cooking steps

---

Depends on #1244

[Benedikt81]

Hi, for those who don't have an ipad: Can you add screenshots?

[christianlupus]

More importantly: what are the sizes in px?

I do not get the exact idea you seem to have. Let's separate concerns.

For landscape mode, the list is aligned to the side. You would like to have separate scroll bars for the ingredients and the rest of the recipe. Correct so far?
I think it makes sense to reorder the tools then as well. You need them prepared before beginning, so putting them above the instructions might be a good idea while allowing scrolling to any position in the instructions and having the ingredients visible at the same time.

Not for the portrait mode. What is the effective width in pixel of the browser?
Can you describe it better even create a sketch of how the screen should be split? Please be as concrete as possible as i do not see a intuitive way of organizing things ATM.

Thank you

[github-actions]

This issue was not updated for 45 days. It is therefore marked as stale. When no update occurs within the next 7 days, this issue will be closed automatically in the next 7 days.

[TheMBeat]

[TheMBeat]

Here we can get all
Display Size

In the first Screenshot the yellow stroke should be Scrollbars

[christianlupus]

I will postpone this issue until the new UI is implemented. Then, we can revaluate this issue here if it will be still valid.

[github-actions]

This PR/issue depends on:

• Complete rework of frontend #1244
  By Dependent Issues (🤖). Happy coding!