fix: Address Ingredients Parser UX overflow issues on mobile

[CloCkWeRX]

What this PR does / why we need it:

Before

Desktop was ok

But mobile cropped error messages if there was more than one or they were long

After:

Which issue(s) this PR fixes:

#4954

Special notes for your reviewer:

This has a slight tradeoff in that the existing call to action ("Create") now relies on the user understanding what the + icon means, unless they hover over and read the title attribute.

The use of flex-wrap also looks a bit stupid, but the alternative was a list group; which looked bad on desktop.

If the CSS framework has a btn-group-vertical on small screens class; I couldnt find it.

Testing

Tested locally, w/Chrome dev tools for mobile UX.

[CloCkWeRX]

Let me know if this should have a general "errors" or "Add missing" prefix when errors.any?

[Kuchenpirat]

I like the concept of this quite a bit but there are still a few things that need improving.

• I feel like it should be visually possible to determin if the parser wants to create a new food or unit (either swaping the plus icon in the button for the food | icon button or appending an icon that matches the type)
• We need to add vertical margin so the cards are no longer right against each other.
• The cards are not all aligned to the right side if they stack which looks quite ugly (screenshot)

---