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)

---

[github-actions]

This PR is stale because it has been open 45 days with no activity.

[Kuchenpirat]

Not stale, just dependent on the nuxt 3 pr

[github-actions]

This PR is stale because it has been open 45 days with no activity.

[michael-genson]

Hey there! As you might know, we've been working on the upgrade to Nuxt 3 for the past several months, and had to hold on reviewing/merging PRs during that time (especially frontend ones). That work is more-or-less completed, so we've started reviewing PRs again.

This PR has merge conflicts preventing us from fully reviewing/testing it. If you're able to resolve those we can get to work on it.

Appreciate your patience, we know it's been a bit, but now that the Nuxt 3 upgrade is completed we should be able to get things reviewed much quicker than before.

Same with your other PR for the ingredient parser: #4961

We're considering re-doing the parsing flow which may eliminate this page entirely, but I'm not sure how far out that is, so I think it's still worth getting these changes in if you have the time.

[michael-genson]

Hey there, it looks like this PR is no longer needed with the new ingredient parser. If you're running into the same issues with the new parser feel free to create a new PR or re-open this one with the changes for the new parser.